为什么React状态与Redux状态不同

Question

我是Redux + React的新手，我正面临一个让我发疯的问题。

更新：添加了Git存储库，而不是在此处粘贴所有代码

我正在创建一个简单的飞镖记分牌，并将所有内容保存在redux商店中。 问题是当我尝试从render方法访问数据时不存在。 就像状态没有传播到道具上一样。

但是如果我检查redux开发工具，数据就在那里。 需要澄清一些屏幕截图，您可以在其中看到在Redux中所有镜头都在React上出现，仅显示第一个镜头。

我认为这可能是由于我的化简器没有使用不变的数据，但我认为它们都可以。 使用以下代码Im：

import update from 'react-addons-update';

function players(state = [], action) {

  switch( action.type ){

    case 'ADD_USER_TO_GAME':
        return [
            ...state,
            action.user
        ];
    case 'REORDER_USERS':
      return action.sortedArray;

    case 'REMOVE_USER':
      return [
        ...state.slice( 0, action.index ),
        ...state.slice( action.index + 1 ),
      ];

    case 'SET_ALL_SCORE':
      let new_state = [...state];
      for( let player in new_state ){
          if( new_state[player].ID ) {
              new_state[player].score = action.user_score;
              new_state[player].shots = [];      
          }
      }
      return new_state;

    case 'SAVE_SHOT':
      return [
        ...state.slice( 0, action.user ),
        { ...state[action.user], shots: [...state[action.user].shots, action.shot] },
        ...state.slice( action.user + 1 ),
      ];

    case 'SAVE_SCORE':

      return [
        ...state.slice( 0, action.user ),
        { ...state[action.user], score: action.score },
        ...state.slice( action.user + 1 ),
      ];

    default:
        return state;
  }

}

export default players;

Answer 1

您直接在这里更改状态：

case 'SET_ALL_SCORE':
  let new_state = [...state];
  for( let player in new_state ){
      if( new_state[player].ID ) {
          new_state[player].score = action.user_score;
          new_state[player].shots = [];      
      }
  }
  return new_state;

您确实克隆了状态对象，但直接对其成员进行了突变。

像这样：

case 'SET_ALL_SCORE':
  return state.map(player => (
    player.ID
      ? { ...player, score: action.user_score, shots: [] }
      : player
  ));

Answer 2

您很可能不在index.js文件中包括来自react-redux的提供程序。 提供程序使您可以访问每个组件中的商店。 查看以下示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import rootReducer from './reducers/rootReducer'
import {createStore, applyMiddleware} from 'redux';
import reduxPromise from 'redux-promise';
import { Router, browserHistory } from 'react-router';
import Routes from './routes';


let storewithmiddleware = applyMiddleware(reduxPromise)(createStore)(rootReducer)

ReactDOM.render(
  <Provider store={storewithmiddleware}>
    <Router history={browserHistory} routes={Routes} />
  </Provider>,
  document.getElementById('root')
);

此外，您将需要mapStateToProps并使用connect（）将组件订阅到商店中，如下所示：

const WelcomePageContainer = connect(mapStateToProps, null)(WelcomePage)

function mapStateToProps(state) {
  return {currentUser: state.currentUser}
} 

（请参见此处： http : //redux.js.org/docs/basics/UsageWithReact.html ）

似乎可以从egghead.io上的Dan Abramov关于Redux的教程中真正受益，它们很棒而且清晰。 另外，按照教程中的代码进行操作-他们可以很好地了解Redux如何在React应用程序之上分层。

请注意：React中的组件状态与Redux存储不是同义词。