React Redux如何传递到操作负载目标值

React Redux 是一个用于在 React 应用程序中管理状态的库。它通过将应用的状态存储在一个全局的 Store 中，然后通过 Dispatching Actions 来更新状态，最后通过 Connect 函数将这些状态映射到组件的 Props 上。

基础概念

Store: Redux 应用的单一数据源，存储整个应用的状态。
Actions: 描述发生了什么的对象，通常是 { type: 'ACTION_TYPE', payload: data } 的形式。
Reducers: 纯函数，接收当前状态和一个 Action，返回新的状态。
Selectors: 从 Store 中提取特定数据的函数。
Connect: 一个高阶组件，用于将 Redux Store 中的状态和 Dispatch 方法映射到 React 组件的 Props 上。

传递到操作负载目标值

在 Redux 中，操作负载（Payload）通常是指 Action 中携带的数据部分。要将这些数据传递到目标组件，你需要遵循以下步骤：

定义 Action: 创建一个 Action Creator 函数，用于生成 Action 对象。

// actions.js
export const updateTargetValue = (value) => ({
  type: 'UPDATE_TARGET_VALUE',
  payload: value,
});

创建 Reducer: 编写一个 Reducer 函数来处理 Action，并更新 Store 中的状态。

// reducer.js
const initialState = {
  targetValue: '',
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_TARGET_VALUE':
      return {
        ...state,
        targetValue: action.payload,
      };
    default:
      return state;
  }
};

配置 Store: 使用 Redux 的 createStore 函数创建 Store 实例。

// store.js
import { createStore } from 'redux';
import { rootReducer } from './reducer';

const store = createStore(rootReducer);

export default store;

连接组件: 使用 React Redux 的 connect 函数将 Store 中的状态和 Dispatch 方法映射到组件的 Props 上。

// MyComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { updateTargetValue } from './actions';

class MyComponent extends React.Component {
  handleChange = (event) => {
    this.props.updateTargetValue(event.target.value);
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.targetValue}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  targetValue: state.targetValue,
});

const mapDispatchToProps = {
  updateTargetValue,
};

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