Javascript 什么'；用Redux更新整个状态的方法是什么？

我有一个空的

状态

对象，它在应用程序启动时用默认的空字段实例化

它包含一个名为

users

的空数组

const state = {
                  users: []
              }

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

由于我需要填充

用户

，我想我只想用从服务器接收的新用户数组替换整个用户数组

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

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

它将由调度程序管理，在调度程序中，将找到处于当前状态的用户

john

，并用新密码替换密码

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

如果是这样，一个动作会是什么样子

{
    action: 'FETCH_USERS'
}

---

然后reducer将替换整个

用户

数组？

您的reducer应该替换

用户

内部

道具

。然后在

组件中更改本地
状态
将接收道具

方法，并从使用的道具设置本地状态。设置状态{users:@nextProps.users}如果需要在应用程序启动时设置状态，请检查和的工作方式。当您传递

预加载状态

属性时，它会将该属性传递给减速器

如果在应用程序执行过程中使用AJAX调用或类似的方法更改

用户

数组，则可以使用操作来完成

因此，您可以向用户发送一个

请求

操作。此操作将向您的服务器发送一个AJAX请求，在成功和错误回调此请求时，您可以调度

request\u USERS\u success

和

request\u USERS\u FAILURE

操作，有效负载为新用户或错误消息

---

查看有关如何使用redux正确处理AJAX请求的更多信息。

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

• 应用程序中的所有状态更改都存储在单个对象状态树中
• 此状态树必须是不可变的
• 每当您需要更新（替换）需要调度操作的状态时，此操作事件必须由还原程序捕获以替换您的状态
• 动作是描述状态/应用程序最小更改的平面JS对象。它必须具有类型属性
• UI组件本身并不知道更改是如何完成的。他们所知道的只是他们需要采取行动
• 纯函数-返回值仅取决于参数的值，没有副作用（网络或db调用），幂等（相同的参数始终可预测返回相同的值），它们不修改传递给它们的值
• Reducer-是一个纯函数，它获取应用程序和操作的整个状态，并返回应用程序的下一个状态（确保不修改当前状态，它必须返回一个新对象），并具有以下方法签名：

  （状态，操作）=>状态

那么，异步流（从网络请求中检索数据）的操作是什么样的呢？当使用异步流时，需要使用某种类型的中间件

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

actions.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

操作，该操作类型为：

“已接收所有用户”

。此类型由reducer捕获，它使用纯函数和Object.assign返回新状态（使用新用户）

减速机纯函数是什么样子的？ reducers.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;
  }
}

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

或者，也可以使用“对象扩展”操作符更新状态：