Reactjs Получить сохраненное значение из магазина через Redux

Question

Я хотел бы сохранить значение, которое я набрал и передал через redux, и получить значение для другого компонента. Как я могу сделать это в этой ситуации ??

plus Было бы очень полезно, если бы вы объяснили, когда это объект или массив. Спасибо!

// 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;

Answer 1

Вам необходимо использовать функцию connect() из пакета react-redux, чтобы подключить ваш компонент к онлайн-хранилищу. Он принимает функцию mapStateToProps в качестве первого аргумента, который используется для передачи значений из хранилища в ваш компонент:

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

connect(mapStateToProps)(AnotherComponent);

Теперь AnotherComponent получит userName в качестве реквизита:

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