Я хочу разделить модули, поэтому я попытался разделить файлы в каталоге src/store/modules
.
Для объединения модулей редуктор я использую combineReducers()
в 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 / контейнеры / 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 / магазин / 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 / магазин / модули / index.js
import { combineReducers } from 'redux';
import board from './board';
export default combineReducers({
board
});
SRC / магазин / модули / 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.info(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 devtool очень полезен. Просто попробуйте, и вы убедитесь, что для вас это проще.
ох .. Спасибо вам большое. Это была очень простая проблема .. Может быть, я думаю, что не понял насчет редукции ..