时间戳

首页 > 解决方案 > Reactjs 通过 redux 从 store 中获取存储的值

reactjs - Reactjs 通过 redux 从 store 中获取存储的值

问题描述

我想保存我通过 redux 输入和提交的值，并在另一个组件上获取值。在这种情况下我该怎么做？

另外，如果您解释它何时是对象或何时是数组，将不胜感激。谢谢！

// AddName.js
state = {
   user: ''
}

handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState(
        { [name]: value }
    );
}

handleSubmit = (e) => {
   const userName = this.state.user;
   const name = {
       userName: userName
   }
   this.props.dispatch({
       type: 'ADD_NAME'
       userName
   })
}

<form onSubmit={this.handleSubmit}>
   <input
      onChange={this.handleChange}
      name="user"
      value={this.state.user}
   />
</form>

export default connect()(AddName);

.

// addNameReducer.js
const addName = (state = {}, action) => {
switch(action.type) {
    case 'ADD_NAME':
        console.log("add_name");
        return { userName: action.userName };
    default:
        return state;
   }
 }

 export default addName;

.

//anotherComponent.js
<p> {I want the stored value here } </p>
export default anotherComponent;

标签： reactjsredux

解决方案

您需要使用包中的connect()函数react-redux将您的组件连接到 redux 商店。它接受mapStateToProps函数作为第一个参数，用于将值从存储传递到您的组件：

const mapStateToProps = state => ({
  userName = state.userName
});

connect(mapStateToProps)(AnotherComponent);

现在AnotherComponent将userName作为道具收到：

export default const AnotherComponent = props => <p>{props.userName}</p>

推荐阅读