Question

我是Redux + React的新手，我遇到的问题是让我发疯。

更新：添加Git repo而不是粘贴所有代码

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

但如果我检查redux开发工具，数据就在那里。一些截图要澄清，你可以看到，在Redux中所有镜头都在React上，只有第一张镜头出现。

我认为这可能是因为我的Reducer不使用不可变数据，但我认为它们都没问题。使用以下代码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中的Provider。提供商允许您访问每个组件中的商店。看看下面的例子：

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存储不是同义词。

为什么React状态与Redux State不同

2 个答案: