使用create-react-app在React中实现Redux-简单问题

Question

Is is correct to pass a reducer as props when i'm using a rootreducer ?

This is my rootReducer.js :

import { combineReducers } from 'redux';
import simpleReducer from './simpleReducer';
import messageReducer from './messageReducer';
import NewReducer from './NewReducer';
export default combineReducers({
 simpleReducer,messageReducer,NewReducer

});

And this is one of my action creators addMessage.js

export const addMessage = (message) => dispatch => {
dispatch({
type: 'ADD',
message: message
})
}

Here is the first reducer messageReducer.js

 export default (state = [], action) => { switch (action.type) { case 'ADD': return [ ...state, action.message ]; default: return state; } }; 

And here is another one simpleReducer.js

 export default (state = {}, action) => { switch (action.type) { case 'SIMPLE_ACTION': return { result: action.payload } default: return state } } 

And finally here is my last reducer NewReducer.js

 export default (state = '', action) => { switch (action.type) { case 'AnyThing': return action.WhatToDisplay; default: return state; } }; 

Here is my mapping in the App.js

class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      input: ''

    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
    }
    handleChange(event) {
    this.setState({
      input: event.target.value
    });
    }
    submitMessage() {
    this.props.submitNewMessage(this.state.input);
    this.setState({
      input: ''
    });
    }
    simpleAction = (event) => {
    this.props.simpleAction();
    }
    localNormalFunction=(event)=>{
     this.props.NewAction()
    }
    render() {
    return (
      <div >
    <h1>fjasgdasdsg</h1>
    <button onClick={this.simpleAction}>Test redux action</button>
    <pre>
    {
    JSON.stringify(this.props)
    }
         </pre>
         <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/> 
          <button onClick={this.submitMessage}>Submit</button>
           <ul>
          {this.props.messageReducer.map( (message,idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
          </ul><br/><br/>
          <button onClick={this.localNormalFunction}>dsadsdsa</button>
          <h2>{this.props.NewReducer}</h2>
          <h2>{this.props.simpleReducer.result}</h2>

          </div>
            );
            }
            }

And here is my ِApp Component.Notice my last 2 h2 tags as well as my ul tag .Without me adding the reducer at the end of the prop , it doesn't work.So is what i'm doing right ? or is there another way to show the redux state in my react ?.Note that i currently have no errors and the code functions well.I just wana know if what i am doing is right or wrong and if there is a better syntax to show the redux state in my create react app.

 class App extends Component { constructor(props) { super(props); this.state = { input: '' } this.handleChange = this.handleChange.bind(this); this.submitMessage = this.submitMessage.bind(this); } handleChange(event) { this.setState({ input: event.target.value }); } submitMessage() { this.props.submitNewMessage(this.state.input); this.setState({ input: '' }); } simpleAction = (event) => { this.props.simpleAction(); } localNormalFunction=(event)=>{ this.props.NewAction() } render() { return ( <div > <h1>fjasgdasdsg</h1> <button onClick={this.simpleAction}>Test redux action</button> <pre> { JSON.stringify(this.props) } </pre> <h2>Type in a new Message:</h2> <input value={this.state.input} onChange={this.handleChange}/><br/> <button onClick={this.submitMessage}>Submit</button> <ul> {this.props.messageReducer.map( (message,idx) => { return ( <li key={idx}>{message}</li> ) }) } </ul><br/><br/> <button onClick={this.localNormalFunction}>dsadsdsa</button> <h2>{this.props.NewReducer}</h2> <h2>{this.props.simpleReducer.result}</h2> </div> ); } } 

Answer 1

It is better practice to get only the props you need from redux in each component. If you pass the whole redux state in mapStateToProps then whenever anything in redux changes you will have everything rerendering even if nothing you use changed.

One common reason you might be getting errors is that you are trying to use the props in render and they get instantiated afterwards.

Try this give default values to the props if you can't get them from redux:

App.defaultProps = {
  result: '',
  NewReducer: '',
  messageReducer: []
}

const mapStateToProps = state => ({
  result: state.simpleReducer.result,
  NewReducer: state.NewReducer,
  messageReducer: state.messageReducer
})

and then change this.props.simpleReducer.result to this.props.result