Question

当我使用rootreducer时将减速器作为道具传递是正确的吗？

这是我的rootReducer.js：

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

});

这是我的动作创建者之一addMessage.js

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

这是第一个reducer messageReducer.js

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

这是另外一个simpleReducer.js

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

最后是我的最后一个减速器NewReducer.js

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

这是我在App.js中的映射

const mapStateToProps = state => ({
...state
})
const mapDispatchToProps = dispatch => ({

simpleAction: () => dispatch(simpleAction()),

submitNewMessage: (message) => {
dispatch(addMessage(message))
},
NewAction: () => dispatch(NewAction())
})

这是我的ِ App Component。注意我的最后2个h2标签以及ul标签。如果没有在prop的末尾添加reducer，它将无法正常工作。我在做什么对吗？或者还有另一种方式来显示中的redux状态我的反应是？。请注意，我目前没有任何错误，代码运行良好。只是想知道我在做什么是对还是错，是否有更好的选择在我的create react应用中显示redux状态的语法。

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

更好的做法是从每个组件的redux中仅获取所需的道具。如果您在mapStateToProps中传递了整个redux状态，那么只要redux中的任何内容发生更改，您都将重新呈现所有内容，即使您使用的内容也没有更改。

您可能会出错的一个常见原因是您试图在渲染中使用这些道具，然后将它们实例化。

如果无法从redux获取道具，请尝试使用此命令为道具赋予默认值：

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

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

，然后将this.props.simpleReducer.result更改为this.props.result

使用create-react-app-简单问题

1 个答案: