Question

所以我对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

记录器指示已发送操作，状态仅不使用提供的值进行更新。我尝试过研究不变性。我尝试确保我的提供者设置正确（确实如此）。我已经使用并删除了“ mapDispatchToProps”大约100次。我已经仔细阅读了此板上的所有建议问题，以找到答案，但仍然来不及。无论出于何种原因，这种愚蠢的事情都不会更新。

我们将不胜感激。

编辑：根据要求，这是我的根减速器的代码：

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”。删除“承诺”解决了该问题，但最终的问题是我将一个函数传递给了我的调度调用。谢谢大家！

Answer 1

这里看起来一切正确，除了

1。 setSuperhero操作正在返回错误的函数。它应该返回一个普通对象。引用redux documentation

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

所以您需要更改

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

到

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

2。您尚未在问题中包括createStore部分。因此，如果您要访问状态子树，则必须使用combineReducers在该树上注册化简器，例如您想在这里访问state.superhero上的状态值。因此，您必须这样注册减速器

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

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

export default store;

现在您可以以state.superhero的身份访问它。如果您不想使用combineReducers并只将一个reducer注册为

const store = createStore(reducers)

然后超级英雄名称数据将在state.name下可用，而不在state.superhero.name下。

这是工作代码和框。 https://codesandbox.io/s/n445j386xp

更新：现在，您已经在问题中加入了createStore部分，问题出在您的行动上。它必须返回一个普通对象，而不是一个函数。休息看起来不错。

希望，它会有所帮助：）

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

1 个答案: