javascript - 为什么更改后我的状态没有映射到我的属性？

Question

我的容器:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Example from '../components/example.jsx';

class ExampleContainer extends Component {
  render() {
    return (
      <Example isUploading={this.props.isUploading}/>
    );
  }
}

const mapStateToProps = (state) => ({
  isUploading: state.isUploading
});

export default connect(mapStateToProps)(ExampleContainer);

我的 reducer :

import { combineReducers } from 'redux';
import * as actionTypes from '../constants/action-types.js';

const initialState = {
  isUploaded: false,
  isUploading: false
};


function isUploading(state = initialState, action) {
  switch (action.type) {
    case actionTypes.IS_UPLOADED:
      return action.payload;
    default:
      return state;
  }
}

function isUploaded(state = initialState, action) {
  switch (action.type) {
    case actionTypes.IS_UPLOADING:
      return action.payload;
    default:
      return state;
  }
}

export default combineReducers({
  isUploading,
  isUploaded,
});

我看到控制台中的 isUploading 状态发生变化，但示例组件上的属性 isUploading 没有变化。它与第一次定义的属性具有相同的值。我还看到 mapStateToProps 函数仅被调用一次。

Answer 1

(从空间和格式的评论中移出。)

你的 reducer 映射到哪里？例如，如果您的 reducer 是这样映射的:

export const rootReducer = combineReducers({
  uploading: uploadingReducer,
  // etc
})

那么你的mapStateToProps将会是(注意state解构):

const mapStateToProps = ({ uploading }) => ({
  isUploading: uploading.isUploading
});

它可能会按预期发生变化，但您传递的不是 bool 值，而是 reducer 中包含的整个状态。