如何将数据附加到 Redux 中的列表

当你使用 Redux来处理你的状态时, 它是一个容器, 你需要让数据尽可能地驻留在其中. 在列表中, 你需要附加和读取数据. 我们将学习如何将数据附加到 Redux 中的列表.

步骤 1 : 定义 action 常量

在所有的 Redux 应用程序中, 都需要定义常量来表示应用程序中的行为. 我们需要将添加数据到列表中的操作与一个常量相关联.

const ADD_DATA = 'ADD_DATA';

步骤 2 : 创建 action creators

在定义了添加数据的常量之后, 我们需要创建一个 action creator 来使用该常量. 它将封装添加数据的逻辑.

const addData = (data) => {
  return {
    type: ADD_DATA,
    payload: data
  };
}

步骤 3 : 定义 reducer

我们需要定义一个 reducer 来处理添加数据操作, 该操作与我们在步骤 1 中定义的 ADD_DATA 常量相关联.

const initialState = {
  dataList: []
};

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_DATA:
      return {
        ...state,
        dataList: [...state.dataList, action.payload]
      };
    default:
      return state;
  }
}

这个 reducer 接收一个 state 和一个 action 参数. 它检查 action 的 type 属性是否与 ADD_DATA 常量的值匹配. 如果匹配, 则使用展开操作符为 state 添加新数据.

步骤 4 : 将 reducer 添加到 store

现在我们需要将 reducer 添加到 store 中.

const store = Redux.createStore(reducer);

这个 store 由 Redux 创建并管理. 它接收一个 reducer 参数, 并返回一个对象表示应用程序的状态.

步骤 5 : 分发 actions

现在我们需要创建一个组件，它将数据添加到 store 中. 对于数据链接分发 actions，您可以使用 connect() 函数。

import { connect } from 'react-redux';

class DataList extends React.Component {
  addDataHandler= () => {
    const data = { id: 1, name: 'John Doe' };
    this.props.addData(data);
  }

  render() {
    return (
      <div>
        <button onClick={this.addDataHandler}>Add Data</button>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    addData: (data) => dispatch(addData(data))
  };
};

export default connect(null, mapDispatchToProps)(DataList);

这个组件分发一个名为 addData 的 action. 每当用户点击 "Add Data" 按钮时, 它将使用数据调用 addData 函数.

步骤 6 : 读取数据

我们可以使用 mapStateToProps() 函数从 store 中读取数据.

const mapStateToProps = state => {
  return {
    dataList: state.dataList
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DataList);

这个函数将返回 store 中 的dataList数据, 所有我们可以将其作为组件的 props来展示它.

总结

这就是将数据附加到 Redux 列表的整个过程. 我们在本教程中涵盖了创建 action 常量、action creators、reducer、将 reducer 添加到 store 中、分发 actions 和读取数据的细节. 我们希望你学到了新技能并开始使用 Redux来管理你的应用程序状态.

以上内容返回markdown格式,有效代码片段应按markdown标记