為什么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存儲不是同義詞。