Redux 存储被覆盖而不是合并

Question

我正在使用 Redux 在 React Native 中编写应用程序。当我执行一个动作时，它似乎没有更新商店，而是替换了商店，只定义了在我的减速器中明确声明的值。

我正在使用 redux-actions 包中的 handleActions。示例减速器如下所示；

import { handleActions } from 'redux-actions';

export default handleActions({
  DOCUMENT_GET_ALL_PENDING: state => ({
    isRefreshing: true,
  }),
  DOCUMENT_GET_ALL_FULFILLED: (state, action) => ({
    document: action.payload.documents,
    isRefreshing: false,
  }),
}, { isRefreshing: false, documents: [] });

例如，当它到达 DOCUMENT_GET_ALL_PENDING 时，文档数组被设置为未定义。这是我创建的商店的样子；我正在使用 redux-promise-middleware、redux-devtools-extension 和 thunk 中间件。

const store = createStore(
  rootReducer,
  defaultState,
  composeWithDevTools(applyMiddleware(promiseMiddleware(), thunk)),
);

欢迎任何帮助或建议。

Answer 1

您需要合并您的状态与前一个状态。现在您只是返回新的状态值。

有很多方法可以做到这一点，但您可以使用 es6 spread operator。

DOCUMENT_GET_ALL_PENDING: state => ({
    ...state,
    isRefreshing: true,
  }),



DOCUMENT_GET_ALL_FULFILLED: (state, action) => ({
    ...state,
    document: action.payload.documents,
    isRefreshing: false,
  })

Redux 存储被覆盖而不是合并

Redux store overwritten instead of merged

react-native

redux

redux-thunk

react-redux