时间戳

首页 > 解决方案 > redux combineReducers() 在我的 Ducks 模式项目中不起作用

reactjs - redux combineReducers() 在我的 Ducks 模式项目中不起作用

问题描述

我想分离模块，所以我试图分离目录中的src/store/modules文件。

为了合并reducer模块，我使用combineReducers()in modules/index.js。

在分离这些模块之前，modules/index.js文件的代码是modules/board.js.

然后我添加了board.js文件。我将index.js的代码移至board.js。最后我添加combineReducer()了index.js，但不知何故它不起作用。

编译错误

文件夹结构

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './containers/App';
import store from './store';

const rootElement = document.getElementById('root');
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
     rootElement
);

src/containers/BoardContainer.js

import React from 'react';
import Board from '../components/Board';

import { connect } from 'react-redux';
import * as boardActions from '../store/modules/board';

class BoardContainer extends React.Component {

    componentWillMount() {
        this.props.handleReadBoards();
    }

    render() {
        /* ... */
    }
}

const mapStateToProps = (state) => {
    return {
        boardList: state.get('boardList')
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleReadBoards: () => { dispatch(boardActions.readBoardList()) }
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(BoardContainer);

src/store/index.js

// redux
import { createStore, applyMiddleware, compose } from 'redux';
import reducers from './modules';
// redux middleware
import thunk from 'redux-thunk';

const store = createStore(reducers,
    compose(applyMiddleware(thunk))
);

export default store;

src/store/modules/index.js

import { combineReducers } from 'redux';
import board from './board';

export default combineReducers({
  board
});

src/store/modules/board.js

import { createAction, handleActions } from 'redux-actions';
import { Map, List } from 'immutable';

import * as boardApi from '../../lib/api/board';

// Action Types
const READ_BOARD_LIST = 'board/READ_BOARD_LIST';

// Action Creators
export const readBoardList = () => async (dispatch) => {
    try {
        const boardList = await boardApi.getBoardList();
        dispatch({
            type: READ_BOARD_LIST,
            payload: boardList
        });
    } catch (err) {
        console.log(err);
    }
}

// initial state
const initialState = Map({
    boardList: List()
})


// reducer
// export default handleActions({
//     [READ_BOARD_LIST]: (state, action) => {
//         const boardList = state.get('boardList');
//         return state.set('boardList', action.payload.data);
//     },
// }, initialState);

// reducer
export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
        case READ_BOARD_LIST:
            return state.set('boardList', action.payload.data);
        default:
            return state;
    }
}

标签： reactjsreact-nativeredux

解决方案

您的减速器现在包含子模块。这样您就必须说明要从哪个模块获取数据：state.board.get('boardList').

您可以尝试设置 redux 工具来轻松地在 redux 中可视化您的数据。

const mapStateToProps = (state) => {
    return {
        boardList: state.board.get('boardList')
    };
}

推荐阅读