Question

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

  `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);

在此组件中，当我单击“redux”按钮然后点击“REDUX”按钮时，我的状态发生了变化。在另一个组件中，我有这个代码：

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

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

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

请问谁可以帮助我？

Answer 1

您只需要调用一次createStore（），最好是在组件树的顶部，而不是在每个组件中。

假设您将应用程序包装在Provider（来自redux）中，您可以通过mapStateToProps函数访问redux的中心状态（您可以将状态元素分配给特定的组件道具）：

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"));

然后在一个组件中：

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

export default connect(mapStateToProps)(MyComponent);

Answer 2

在第一个组件中尝试使用以下代码

import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state={user:[]}, action) {
      switch (action.type) {
        case 'ADD_USER':
      return {
        ...state,
        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);

并在第二个组件上使用以下代码

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

如何告诉redux的其他组成部分的变化状态？

2 个答案: