Reactjs React/Redux:已调度操作，状态未更新

所以我对Redux非常陌生（这是我第一个使用它的项目），我遇到了一些障碍

我这里有一个简单的场景，其中输入值发生更改，更新Redux存储onChange。下面是我的代码：

组件：

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

import { setSuperhero } from '../actions/setSuperhero'

const SearchField = (props) => (
  <div className="d-flex justify-content-center">
    <form className="form-inline">
      <div className="form-group mb-0">
        <input
          type="text"
          name="superhero"
          className="form-control"
          placeholder="Thor, Iron Man, etc."
          onChange={(e) => {
            props.dispatch(setSuperhero(e.target.value));
          }}></input>
      </div>
      <button type="submit" className="btn btn-light ml-2">Search</button>
    </form>
  </div>
)

const mapStateToProps = state => {
  return {
    superhero: state.superhero.name
  }
}

export default connect(mapStateToProps)(SearchField);

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

export const setSuperhero = name => dispatch => (
  dispatch({
    type: types.SET_SUPERHERO,
    payload: name
  })
)

export const SET_SUPERHERO = "SET_SUPERHERO";

import * as types from '../types'

const superheroReducer = (state = {name: 'Thor'}, action) => {
  switch (action.type) {
    case types.SET_SUPERHERO: {
      return {
        ...state,
        name: action.payload
      }
    }
    default:
      return state;
  }
}

export default superheroReducer

import { combineReducers } from 'redux';

import uiReducer from './uiReducer';
import superheroReducer from './superheroReducer';
import heroInfoReducer from './heroInfoReducer';
import comicsReducer from './comicsReducer';
import seriesReducer from './seriesReducer';
import eventsReducer from './eventsReducer';

const rootReducer = combineReducers({
  ui: uiReducer,
  superhero: superheroReducer,
  heroInfo: heroInfoReducer,
  comics: comicsReducer,
  series: seriesReducer,
  events: eventsReducer
})

export default rootReducer

类型：

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

import { setSuperhero } from '../actions/setSuperhero'

const SearchField = (props) => (
  <div className="d-flex justify-content-center">
    <form className="form-inline">
      <div className="form-group mb-0">
        <input
          type="text"
          name="superhero"
          className="form-control"
          placeholder="Thor, Iron Man, etc."
          onChange={(e) => {
            props.dispatch(setSuperhero(e.target.value));
          }}></input>
      </div>
      <button type="submit" className="btn btn-light ml-2">Search</button>
    </form>
  </div>
)

const mapStateToProps = state => {
  return {
    superhero: state.superhero.name
  }
}

export default connect(mapStateToProps)(SearchField);

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

export const setSuperhero = name => dispatch => (
  dispatch({
    type: types.SET_SUPERHERO,
    payload: name
  })
)

export const SET_SUPERHERO = "SET_SUPERHERO";

import * as types from '../types'

const superheroReducer = (state = {name: 'Thor'}, action) => {
  switch (action.type) {
    case types.SET_SUPERHERO: {
      return {
        ...state,
        name: action.payload
      }
    }
    default:
      return state;
  }
}

export default superheroReducer

import { combineReducers } from 'redux';

import uiReducer from './uiReducer';
import superheroReducer from './superheroReducer';
import heroInfoReducer from './heroInfoReducer';
import comicsReducer from './comicsReducer';
import seriesReducer from './seriesReducer';
import eventsReducer from './eventsReducer';

const rootReducer = combineReducers({
  ui: uiReducer,
  superhero: superheroReducer,
  heroInfo: heroInfoReducer,
  comics: comicsReducer,
  series: seriesReducer,
  events: eventsReducer
})

export default rootReducer

减速器：

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

import { setSuperhero } from '../actions/setSuperhero'

const SearchField = (props) => (
  <div className="d-flex justify-content-center">
    <form className="form-inline">
      <div className="form-group mb-0">
        <input
          type="text"
          name="superhero"
          className="form-control"
          placeholder="Thor, Iron Man, etc."
          onChange={(e) => {
            props.dispatch(setSuperhero(e.target.value));
          }}></input>
      </div>
      <button type="submit" className="btn btn-light ml-2">Search</button>
    </form>
  </div>
)

const mapStateToProps = state => {
  return {
    superhero: state.superhero.name
  }
}

export default connect(mapStateToProps)(SearchField);

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

export const setSuperhero = name => dispatch => (
  dispatch({
    type: types.SET_SUPERHERO,
    payload: name
  })
)

export const SET_SUPERHERO = "SET_SUPERHERO";

import * as types from '../types'

const superheroReducer = (state = {name: 'Thor'}, action) => {
  switch (action.type) {
    case types.SET_SUPERHERO: {
      return {
        ...state,
        name: action.payload
      }
    }
    default:
      return state;
  }
}

export default superheroReducer

import { combineReducers } from 'redux';

import uiReducer from './uiReducer';
import superheroReducer from './superheroReducer';
import heroInfoReducer from './heroInfoReducer';
import comicsReducer from './comicsReducer';
import seriesReducer from './seriesReducer';
import eventsReducer from './eventsReducer';

const rootReducer = combineReducers({
  ui: uiReducer,
  superhero: superheroReducer,
  heroInfo: heroInfoReducer,
  comics: comicsReducer,
  series: seriesReducer,
  events: eventsReducer
})

export default rootReducer

Logger指示已发送操作，但状态不会使用提供的值进行更新。我试过研究不变性。我已经试着确保我的提供者设置正确（确实如此）。我已经使用和删除了大约100次“mapDispatchToProps”。我已经仔细阅读了黑板上的每一个推荐问题，想找到答案，但还是没找到答案。不管出于什么原因，这个愚蠢的东西不会更新

任何帮助都将不胜感激

编辑：根据要求，下面是我的根减速机的代码：

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

import { setSuperhero } from '../actions/setSuperhero'

const SearchField = (props) => (
  <div className="d-flex justify-content-center">
    <form className="form-inline">
      <div className="form-group mb-0">
        <input
          type="text"
          name="superhero"
          className="form-control"
          placeholder="Thor, Iron Man, etc."
          onChange={(e) => {
            props.dispatch(setSuperhero(e.target.value));
          }}></input>
      </div>
      <button type="submit" className="btn btn-light ml-2">Search</button>
    </form>
  </div>
)

const mapStateToProps = state => {
  return {
    superhero: state.superhero.name
  }
}

export default connect(mapStateToProps)(SearchField);

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

export const setSuperhero = name => dispatch => (
  dispatch({
    type: types.SET_SUPERHERO,
    payload: name
  })
)

export const SET_SUPERHERO = "SET_SUPERHERO";

import * as types from '../types'

const superheroReducer = (state = {name: 'Thor'}, action) => {
  switch (action.type) {
    case types.SET_SUPERHERO: {
      return {
        ...state,
        name: action.payload
      }
    }
    default:
      return state;
  }
}

export default superheroReducer

import { combineReducers } from 'redux';

import uiReducer from './uiReducer';
import superheroReducer from './superheroReducer';
import heroInfoReducer from './heroInfoReducer';
import comicsReducer from './comicsReducer';
import seriesReducer from './seriesReducer';
import eventsReducer from './eventsReducer';

const rootReducer = combineReducers({
  ui: uiReducer,
  superhero: superheroReducer,
  heroInfo: heroInfoReducer,
  comics: comicsReducer,
  series: seriesReducer,
  events: eventsReducer
})

export default rootReducer

---

编辑：关于已接受答案的快速补充：在我的“applyMiddleware”通话中呼叫了“thunk”和“promise”。删除“promise”修复了这个问题，但最终的问题是我将一个函数传递给我的分派调用。谢谢大家

这里除了

一,<代码>设置超级英雄操作返回的函数不正确。它应该返回一个普通对象。引述

动作是普通的JavaScript对象。操作必须具有指示正在执行的操作类型的type属性

所以你需要改变

export const setSuperhero = name => dispatch => (
  dispatch({
    type: types.SET_SUPERHERO,
    payload: name
  })
)

到

二,。问题中没有包含

createStore

部分。因此，如果您想访问状态子树，那么您必须使用在该树上注册reducer。例如，在这里，您想在

state.superhero

上访问您的状态值。所以你必须注册你的减速机

import { createStore, combineReducers } from "redux";
import reducers from "./reducer";

const store = createStore(combineReducers({ superhero: reducers }));

export default store;

现在您可以通过

state.superhero

访问它。如果您不想使用组合减速器，只需将单个减速器注册为

const store = createStore(reducers)

然后超级英雄名称数据将在

state.name

下可用，而不是

state.superhero.name

下可用

这是工作代码沙盒

更新： 由于您现在已将

createStore

部分包括在问题中，问题在于您的操作。它必须返回普通对象，而不是函数。休息看起来不错

---

希望有帮助：）

哪个状态不更新？您正在将

superhero

prop传递到

SearchField

，因此您可以使用

props.superhero

访问它。请尝试在

SearchField

中输入

console.log（props）

，然后开始输入？日志是什么？你能告诉我们你是如何注册减速器的吗？@JordanEnev添加了减速器注册表。我还控制了我的减速器，它似乎没有点火。哦，我知道发生了什么。您在操作中返回函数。调度需要一个对象。这就是诀窍！我安装了thunk，但在我的“applyMiddleware”通话中同时使用“thunk”和“promise”会造成某种障碍。你和Jordan Enev一针见血。我返回的是函数而不是普通对象，所以我需要thunk中间件。我不知道冲突是什么，但事实证明我在“applyMiddleware”调用中同时使用了“thunk”和“promise”，并且删除了“promise”修复了问题！酷！很高兴这有帮助：）