使用 Redux 更新整个状态的方法是什么？

Question

我有一个空state对象，在应用程序启动时使用默认空字段实例化。

它包含一个名为 的空数组users。

const state = {
                  users: []
              }

在开始时，我向服务器发送一些命令，然后服务器发送数据作为响应。

由于我需要填充users，我想我只想用从服务器收到的新数组替换整个用户数组。

我读到，在 redux 中，您获取当前状态，对其应用一些更改并返回一个新状态。当我想更改用户密码时，这听起来不错，然后我会调用如下操作：

{
    action: 'CHANGE_PASSWORD',
    user: 'john',
    password: 'karamba',
}

它将由调度程序管理，在调度程序中将john找到处于当前状态的用户，并且密码将被替换为新密码。

但这对于我想要加载一些初始数据的场景是否正确？

如果是这样，行动会是什么样子？

{
    action: 'FETCH_USERS'
}

然后reducer会取代整个users数组？

Answer 1

让我们先介绍一些基础知识

• 应用程序内的所有状态更改都存储在单个对象状态树中。
• 该状态树需要是不可变的。
• 每当您需要更新（替换）状态时，您都需要分派一个操作，该操作事件必须由减速器捕获以替换您的状态。
• 操作是平面 JS 对象，描述对状态/应用程序的最小更改。它必须具有 TYPE 属性。
• UI 组件本身并不知道更改是如何完成的。他们所知道的是他们需要派遣一个行动。
• 纯函数 - 返回值仅取决于参数的值，没有副作用（网络或数据库调用），幂等（相同的参数总是可预测返回相同的值），它们不会修改传递给它们的值
• Reducer - 是一个纯函数，它获取应用程序的整个状态和操作并返回应用程序的下一个状态（确保不修改当前状态，它必须返回一个新对象）并具有以下方法签名：(State,Action) => State;

那么，异步流（从网络请求中检索数据）的操作是什么样的？当您使用异步流时，需要使用某种类型的中间件http://redux.js.org/docs/advanced/Middleware.html。

在下面的操作中，我使用了一个名为 thunk 的中间件。

动作.js：

export function receiveAllProducts(users){
    return {
        type: 'RECEIVED_ALL_USERS',
        users: users
    }
}


export function fetchALLUserData(){
    return thunkLoadAllUserData;
}


const thunkLoadAllUserData = (dispatch) => {
        let users = [];
        users = //Some network request to get data
        dispatch(receivedAllUserData(users));
    });
}

因此，您将向 分派一个操作fetchALLUserData，该操作返回一个thunk函数（异步流的 redux 中间件）来检索用户，然后调用receivedAllUserData类型为 : 的操作'RECEIVED_ALL_USERS'。该类型由您的减速器捕获，该减速器使用纯函数和 Object.assign 返回新状态（包含新用户）。

纯函数减速器是什么样的？减速器.js：

const initialState = {}

export default (currentState = initialState, action = {}) => {


  switch (action.type) {

    case 'RECEIVED_ALL_USERS':
      return Object.assign({}, currentState, {
        users: action.users,
      });
    case 'RECEIVE_ALL_PRODUCTS':
      return Object.assign({}, currentState, {
        productsAsObject: action.productsObject,
      });

    // ...other actions

    default:
      return currentState;
  }
}

Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。因此将复制整个 currentState 并使用获取的用户覆盖您的用户属性

或者，您也可以使用对象扩展运算符来更新状态：http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html