3

私は redux を初めて使用します -mapStateToPropsが呼び出されず、コンポーネントが更新されて「hello world」が表示されないのはなぜですか?

http://codepen.io/anon/pen/QyXyvW?editors=0011

const helloReducer = (state= {message:'none'}, action) => {    
 switch (action.type) {
    case 'HELLO':
      return Object.assign(state,{message:"hello world"});
    default:
      return state;
  }  
};
const myApp = Redux.combineReducers({
  helloReducer
});    
const App = ({onClick,message}) => (
  <div>
    <a href="#" onClick={onClick}>click</a><b>{message}</b>
  </div>
);
const mapStateToProps = (state, ownProps) => {
  return {message: state.message}
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch({type: 'HELLO'})
    }
  }
}   
const ConnectedApp = ReactRedux.connect(
  mapStateToProps,
  mapDispatchToProps
)(App);
let Provider = ReactRedux.Provider;
let store = Redux.createStore(myApp)
let e = React.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  document.getElementById('root')
);
4

2 に答える 2

2

レデューサーの「状態」に直接割り当てているため、直接変更されています。代わりに戻る必要がありますObject.assign({}, state, {message:"hello world"});。

mapStateToPropsまた、React-Redux は、コンポーネントの関数が絶対に必要な場合にのみ実行されるようにするために多くの作業を行うことにも注意してください。

于 2016-02-21T02:26:17.860 に答える
0

行を置換:return Object.assign(state,{message:"hello world"});

これとともに：return {...state, message:"hello world"};

ES6スプレッドオペレーターです。

于 2016-12-29T19:04:36.113 に答える