尝试使用 React + Redux，并且可能正在做一些明显愚蠢的事情，因为触发操作以通过网络获取数据的组件在获取数据时不会得到更新(重新呈现)。

这是我的代码的相关部分:

作为应用程序入口点的顶级 index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reduxPromise from 'redux-promise';
import createLogger from 'redux-logger';

const logger = createLogger();

import routes from './routes';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(reduxPromise, logger)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.container'));

顶级容器应用:

import React, {Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as Actions from '../actions';
import Header from '../components/header';
import Showcase from '../components/showcase';

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

function mapDispatchToProps(dispatch) {
  return {
    fetchResources: () => {
      dispatch(Actions.fetchResources());
    }
  }
}


class App extends Component {

  render() {
    console.log('props in App', this.props);
    return (
      <div>
        <Header/>
        <Showcase
          fetchResources={this.props.fetchResources}
          resources={this.props.resources}
        />
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

组件在即将挂载时触发发送数据请求的操作，并且应该显示获取的数据:

import React, {Component} from 'react';
import {connect} from 'react-redux';

class Showcase extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.fetchResources();
  }

  render() {
    console.log('resources', this.props);
    return (
      <div>
        This is showcase
      </div>
    );
  }
}

export default connect(state => ({resources: state.resources}))(Showcase)

Action 创作者:

import * as types from '../constants/ActionTypes';
import axios from 'axios';

export function fetchResources() {
  return {
    type: types.FETCH_FIRST,
    payload: axios.get('/sampledata/1.json')
  }
}

获取操作的 reducer :

import * as types from '../constants/ActionTypes';

export default function resourcesReducer (state={}, action) {
  switch (action.type) {
    case types.FETCH_FIRST:
      console.log('about to return', Object.assign (state, {resources: action.payload.data }))
      return Object.assign (state, {resources: action.payload.data });
    default:
      return state
  }
};

最后是根 reducer :

import { combineReducers } from 'redux';
import navigationReducer from './navigation-reducer';
import resourcesReducer from './resources-reducer';

const rootReducer = combineReducers({
  navigationReducer,
  resourcesReducer
});

export default rootReducer;

所以，这就是我观察到的。成功触发请求数据的操作，发送请求，reducer 在解决 promise 时接收它，并使用获取的数据更新状态。此时，我希望顶级 App 组件和 Showcase 组件检测到商店已更新，并重新呈现，但我没有看到它在控制台中。

此外，我对 redux-logger 的控制台输出感到困惑:

具体来说，我很惊讶地看到 state 包含来自 rootReducer 的缩减器——我不知道它是否正确(Redux logger Github page 上的示例显示了没有缩减器的状态)。同样令人惊讶的是，redux-logger 报告的 prev state 包含与 next state 相同的 resourcesReducer 对象>，尽管直觉上我希望 prev state 或多或少是空的。

能否请您指出我做错了什么以及如何让 React 组件响应 state 更改？

============================================= ===

更新:

1) 更改了 App 组件中的 mapStateToProps 函数，使其正确映射到 reducer 状态:

function mapStateToProps(state) {
  return {
    resources: state.resourcesReducer
  }
}

2) 仍然将资源传递给`Showcase 组件:

  render() {
    console.log('props in App', this.props);
    return (
      <div>
        <Header navigateActions={this.props.navigateActions}/>
        React simple starter
        <Showcase
          fetchResources={this.props.fetchResources}
          resources={this.props.resources}
        />
      </div>
    );

3) 尝试通过字符串化来在屏幕上显示 resources 以查看此对象内部的实际内容:

  render() {
    console.log('resources', this.props);
    return (
      <div>
        This is showcase {JSON.stringify(this.props.resources)}
      </div>
    );
  }

在屏幕上看到这个:This is showcase {}。该组件似乎没有重新呈现。

这是控制台的屏幕截图，显示 App 的 Prop 已使用 下一个状态 的值更新。尽管如此，这并没有导致组件重新渲染:

再次更新:我的 javascript-fu 也很差。我并没有完全意识到通过返回 Object.assign (state, {resources: action.payload.data }); 我实际上是在改变状态，并且一个简单的参数反转可以让我实现我的意图。感谢this discussion SO 上的启蒙。

最佳答案

I am surprized to see that the state contains reducers from the rootReducer

这就是它的工作原理。仔细查看 combineReducers()。

const rootReducer = combineReducers({
  navigationReducer,
  resourcesReducer
});

认识到它不是参数列表；它是一个单一的对象参数。也许在冗长的语法中更清楚:

var rootReducer = combineReducers({
  navigationReducer: navigationReducer,
  resourcesReducer: resourcesReducer
});

resourcesReducer 键指向 resourcesReducer() 函数返回的状态。也就是说，resourcesReducer() 中的 state 变量只是整个状态的一部分。

传递给 connect() 的函数将整个状态作为参数。你的实际应该是这样的:

export default connect(state => ({
  resources: state.resourcesReducer.resources
}))(Showcase);

关于javascript - react + 终极版 : Component does not update，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36000395/