Reactjs redux combineReducers（）在我的项目中无法使用Ducks模式

我想分离模块，所以我尝试分离

src/store/modules

目录中的文件

要合并reducer模块，我使用

modules/index.js

中的

combinereducer（）

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

然后我添加了board.js文件。我将index.js的代码移动到board.js。最后，我在index.js中添加了
combineReducer（）
，但不知何故它不起作用



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
);

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);

// 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;

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

export default combineReducers({
  board
});

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;
    }
}

src/store/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
);

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);

// 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;

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

export default combineReducers({
  board
});

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;
    }
}

src/store/modules/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
);

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);

// 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;

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

export default combineReducers({
  board
});

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;
    }
}

src/store/modules/board.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
);

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);

// 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;

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

export default combineReducers({
  board
});

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;
    }
}

减速器现在包含子模块。因此，您必须说明要从哪个模块获取数据：
state.board.get（'boardList'）

您可以尝试设置redux工具，以便在redux中轻松可视化数据

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

哦非常感谢。这是一个非常简单的问题。。也许，我认为我还不了解redux..在我看来，redux devtool非常有用。试试看，你会发现这对你来说更容易。