如何覆盖 Redux 中的初始状态

Question

我正在使用后端编写一个应用程序，我需要在打开应用程序时进行制作。向来自正确条件的服务器发出请求。哪个应该重写整个应用程序状态。

但是现在，我只能将它分配给"loading/data"设施，并且只需要完全覆盖Redux的Root状态。

来自服务器的响应：http://i.imgur.com/yams0M4.jpg

actions/loading.js

export function fetchTodos(path) {
  return function (dispatch) {
    dispatch({
      type: FETCH_TODOS_REQUEST,
    });
    return axios
      .get(`http://localhost:3000${path}`)
      .then((response) => {
        const { data } = response;
        console.log('data', data);
        dispatch({
          type: FETCH_TODOS_SUCCESS,
          data,
        });
      })
      .catch((error) => {
        const { data } = error.response;
        console.log('data', data);
        dispatch({
          type: FETCH_TODOS_FAILURE,
          error: data,
        });
      });
  };

reducers/index.js

const rootReducer = combineReducers({
  loading,
  Header,
  Main,
  routing: routerReducer,
});

export default rootReducer;

reducers/loading.js

export function loading(state = initialState.loading, action) {
  switch (action.type) {
    case FETCH_TODOS_REQUEST:
      return Object.assign({}, state, {
        isFetching: true,
      });
    case FETCH_TODOS_SUCCESS:
      return Object.assign({}, state, {
        isFetching: false,
        data: action.data.data,
      });
    case FETCH_TODOS_FAILURE:
      return Object.assign({}, state, {
        isFetching: false,
        error: action.error,
      });
    default:
      return state;
  }
}

store/index.js

function configureStoreProd(initialState) {
  return createStore(rootReducer, initialState);
}

function configureStoreDev(initialState) {
  const middlewares = [
    thunk,
  ];
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(rootReducer, initialState, composeEnhancers(
    applyMiddleware(...middlewares),
    ),
  );

Answer 1

您需要在 Header 和 Main 减速器中连接到 FETCH_TODOS_SUCCESS 操作。

当您合并减速器时，每个减速器的 state 数据仅包含该减速器的段。

例如，您的 loading reducer 将可以访问您商店的 state.loading 部分。要更新商店的 Main 细分，您可以执行以下操作：

// reducers/Main.js

export default (state = initialState.Main, action) => {
    switch (action.type) {
        case FETCH_TODOS_SUCCESS:
            const newMainData = action.data.data.main;

            return Object.assign({}, state, newMainData);
        default:
            return state;
    }
}

作为旁注，您应该只为 实例化类型 变量（例如 class 类对象）使用大写变量。

此外，不要忘记更新您的 loading reducer 以仅从您的服务器响应中提取加载数据。

如何覆盖 Redux 中的初始状态

How to overwrite the initial State in Redux

javascript

redux

redux-thunk