如何告诉其他组件的 redux 变化状态? [英] How tell an other component of changement state of redux?

问题描述

我有两个组件 reactjs ，我创建了一个状态 redux 来处理来自两个组件的这个状态.

 `appcomponent.jsimport React, { Component } from 'react';从'redux'导入{createStore}；从'react-redux'导入{连接}；//减速器导出函数 get_user(state=[], action) {开关(动作.类型){案例ADD_USER":返回 [{用户:action.user}];默认:返回状态；}}类 appcomponent 扩展组件 {构造函数(道具){超级(道具)；this.state = {用户:[]};//this.addUser=this.addUser.bind(this);this.onFormSubmit=this.onFormSubmit.bind(this);this.get=this.get.bind(this);}得到(){控制台日志(this.props.r)；}onFormSubmit() {this.props.send('用户');}使成为() {返回 (<div><br/><br/><br/><button onClick={this.onFormSubmit}>redux</button><br/><br/><br/><br/><button onClick={this.get}>REDUX</button>

)}}//行动导出函数 addUser(user) {返回 {类型:'ADD_USER'，用户，};}函数 mapDispatchToProps(调度){返回 {发送:用户 =>调度(添加用户(用户))};};const mapStateToProps = (state, ownProps) =>{返回 { r:state};};导出默认连接(mapStateToProps,mapDispatchToProps)(appcomponent);

在此组件中，当我单击redux"按钮然后单击REDUX"按钮时，状态发生了变化.在另一个组件中，我有这个代码:

 class App extends Component {构造函数(道具){超级(道具)；}使成为() {返回 (<div><h1>{this.props.user}</h1></div>)}}const mapStateToProps = (state, ownProps) =>{return { user: state[0].user};//.user};函数 mapDispatchToProps(调度){返回 {得到:用户 =>调度(添加用户('用户名'))};};导出默认连接(mapStateToProps,mapDispatchToProps)(App);

在最后一个组件中，我总是得到在 index.js 中创建的初始状态

var store = createStore(get_user,[{user:'hhhh'}]);ReactDOM.render( <Provider store={store}>

请问谁能帮帮我?

解决方案

你只需要调用 createStore() 一次，最好是在你的组件树的顶部附近，而不是在每个组件中.

假设您将应用程序包装在一个 Provider(来自 redux)中，您将可以通过 mapStateToProps 函数访问 redux 的中央状态(您可以在其中将状态元素分配给特定的组件道具):

import { Provider } from 'react-redux';导入 {createStore, combineReducers } from 'redux';const store = createStore(combineReducers({用户:usersReducer，otherThings: otherThingsReducer}))常量应用 = (<提供者商店={商店}><MainAppComponentOrRouter/></提供者>);ReactDOM.render(app, document.getElementById("app"));

然后在一个组件中:

const mapStateToProps = (state, props) =>{返回 {用户:state.user，其他事物:state.otherThings};};导出默认连接(mapStateToProps)(MyComponent)；

I have two components reactjs , I create an state redux to handle this state from two components .

  `appcomponent.js 
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state=[], action) {
      switch (action.type) {
        case 'ADD_USER':
      return [
        {user:action.user}
      ];
      default:
      return state;
  }
     }  
class appcomponent extends Component {
    constructor(props) {
        super(props);
        this.state = {Users:[]};
        //this.addUser=this.addUser.bind(this);
        this.onFormSubmit=this.onFormSubmit.bind(this);
        this.get=this.get.bind(this);
      }
get(){
    console.log(this.props.r);
}
onFormSubmit() {
  this.props.send('user');
}
  render() {
  return (
    <div>
   <br /><br /><br />
     <button onClick={this.onFormSubmit}>redux</button><br /><br /><br /><br />
     <button onClick={this.get}>REDUX</button>
    </div>
  )}
}
// action
export function addUser(user) {
  return {
    type: 'ADD_USER',
    user,
  };
}
function mapDispatchToProps (dispatch)  {
  return {
    send: user => dispatch(addUser(user))
  };
};
const mapStateToProps = (state, ownProps) => {
  return  { r:state};

};
export default connect(mapStateToProps,mapDispatchToProps)(appcomponent);

In this component when I click "redux" button then onclick "REDUX" button I get the state changed. In the other component I have this code :

 class App extends Component {
constructor(props) {
    super(props);
    }
render() {
    return (
<div><h1>{this.props.user}</h1></div>
)
}}
const mapStateToProps = (state, ownProps) => {
  return  { user: state[0].user};//.user
};
function mapDispatchToProps (dispatch)  {
  return {
    get: user => dispatch(addUser('username'))
  };
};
export default connect(mapStateToProps,mapDispatchToProps)(App);

In the last component always I get the initial state created in index.js

var store = createStore(get_user,[{user:'hhhh'}]);
ReactDOM.render( <Provider store={store}>

Please who can help me ?

解决方案

You only need to call createStore() once, preferably near the top of your component tree not in each component.

Assuming you wrap your app in a Provider (from redux) you'll have access to redux's central State via the mapStateToProps function (where you can assign state elements to a particular components props):

import { Provider } from 'react-redux';
import {createStore, combineReducers } from 'redux';

const store = createStore(
  combineReducers({
    user: usersReducer,
    otherThings: otherThingsReducer
  })
)

const app = (
  <Provider store={store}>
    <MainAppComponentOrRouter/>
  </Provider>
);

ReactDOM.render(app, document.getElementById("app"));

And then in a component:

const mapStateToProps = (state, props) => {
  return {
    user: state.user,
    otherThings: state.otherThings
  };
};

export default connect(mapStateToProps)(MyComponent);

这篇关于如何告诉其他组件的 redux 变化状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！