如何在React中使用Redux实现文本值向另一个组件的传递？

嘿，我看了你写的Redux代码，目前没法把输入框的文本传递到另一个组件，主要是几个核心环节没处理对，我给你一步步修正下，保证能实现需求~

先说说代码里的问题点 #

• 你在handleChange触发action时，没把输入框的文本值传给action，Redux store根本拿不到要存储的数据
• nameAction函数没有接收参数的能力，没法把输入值传递给reducer
• Outputcomponent没和Redux store做连接，自然获取不到nameState
• reducer里处理add类型时依赖action.payload，但之前的代码里根本没传这个值

修正后的完整代码 #

1. Mycomponent.js

这里我们要获取输入框的值，并且用更规范的mapDispatchToProps来绑定action，代替直接调用dispatch：

import React, { Component } from 'react';
import { connect } from 'react-redux';
// 导入我们的action函数
import { nameAction } from './nameAction';

class Mycomponent extends Component {
  state = { textInput: '' };

  handleChange = event => {
    // 先拿到输入框的文本值
    const inputValue = event.target.value;
    // 调用action并把值传进去
    this.props.nameAction(inputValue);
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} placeholder="输入文本试试~" />
      </div>
    );
  }
}

// 映射store的状态到组件props
const mapStateToProps = state => ({ 
  nameState: state.nameState 
});

// 映射action到组件props，不用手动写dispatch
const mapDispatchToProps = {
  nameAction
};

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

2. nameAction.js

让action函数接收输入值作为参数，并把它放到payload里传递给reducer：

// 接收输入值参数，返回带payload的action
export const nameAction = (inputValue) => ({ 
  type: 'add',
  payload: inputValue
});

export default { nameAction };

3. nameReducer.js

这里给初始state设置明确的默认值（空字符串），避免后续取值出错，然后接收action里的payload更新状态：

// 初始化state，给nameState一个默认的空字符串
const initialState = {
  nameState: ''
};

const nameReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'add': {
      // 解构旧状态，更新nameState为action传过来的payload
      return { 
        ...state, 
        nameState: action.payload
      };
    }
    default: return state;
  }
};

export default nameReducer;

4. Outputcomponent.js

必须用connect把组件和Redux store连接起来，才能获取到store里的nameState：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Outputcomponent extends Component {
  render() {
    return (
      <div>
        <h3>你输入的文本是：</h3>
        <div>{this.props.nameState || '还没输入内容哦'}</div>
      </div>
    );
  }
}

// 映射store的nameState到组件props
const mapStateToProps = state => ({ 
  nameState: state.nameState 
});

export default connect(mapStateToProps)(Outputcomponent);

别忘了配置Redux的Store（关键！） #

你需要在入口文件（比如index.js）里创建store，并用Provider把整个应用包裹起来，这样所有组件都能访问到store：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import nameReducer from './nameReducer';
import Mycomponent from './Mycomponent';
import Outputcomponent from './Outputcomponent';

// 创建Redux store，传入我们的reducer
const store = createStore(nameReducer);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <div style={{ padding: '20px' }}>
      <Mycomponent />
      <Outputcomponent />
    </div>
  </Provider>
);

这样修改之后，你在输入框里输入文本时，值会通过action传递到reducer更新store，Output组件就能实时显示你输入的内容啦~

内容的提问来源于stack exchange，提问作者abu abu