Question

我正在尝试使用 redux 进行反应。

我有动作创建者：

export const API_PATH_UPDATED = 'query/apiPathUpdated';

export const apiPathUpdated = (apiPath) => ({
  type: API_PATH_UPDATED,
  payload: {
    apiPath,
  },
});

在这个函数中调用这个动作创建者：

const getUpcoming = useCallback(
    () => dispatch(apiPathUpdated('/movie/upcoming')),
    [dispatch],
  );

并且应该使用以下减速器更新我的状态：

const initialState = {
  basePath: 'https://api.themoviedb.org/3',
  apiPath: '/movie/popular',
  lang: 'en-US',
  adult: false,
  genresPath: '/genre/movie/list',
};

const queryReducer = (state = initialState, action) => {
  switch (action.type) {
    case API_PATH_UPDATED: {
      return {
        ...state,
        apiPath: action.payload.apiPath,
      };
    }
    default:
      return state;
  }
};

export default queryReducer;

实际上，当我在 Redux devtools 中单击触发 getUpcoming 函数的按钮时，我看到该操作被正确的参数触发： enter image description here

但它没有更新状态，我看到了旧的 apiPath 值： enter image description here

这是我商店的代码：

import {
  createStore, applyMiddleware, compose, combineReducers,
} from 'redux';
import camelMiddleware from 'redux-camel';
import thunk from 'redux-thunk';

import moviesReducer from './movies/index';
import queryReducer from './query/index';
import genresReducer from './genres/index';

const rootReducer = combineReducers({
  query: queryReducer,
  movies: moviesReducer,
  genres: genresReducer,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
  trace: true, traceLimit: 25,
}) || compose;

const store = createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk, camelMiddleware()),
));

export default store;

感谢大家的帮助。 我发现了我的问题。我忘了在我的 queryReducer 文件中用大括号括住命名导入。

所以行

import API_PATH_UPDATED from './queryActions';

应该

import { API_PATH_UPDATED } from './queryActions';

早上 5 点编码时会发生什么：/

即使触发了减速器，Redux 也不会更新状态

0 个答案: