为什么我的 Redux 操作没有触发 reducer？

Question

我的代码本应更新屏幕上的时间元素并在单击按钮时增加日期，但这并没有发生。我不确定我在这里遗漏了什么。

actions.js

export const getTime = () => {
    return ({
        type: "FETCH_TIME",
        payload: Date.now()
    });
};

export const incDate = (by) => {
    console.log("in inc date");
    return ({
        type : "INCREASE_DATE",
        payload : by
    });
};

timeReducer.js

const timeReducer = (state  = {
    time : Date.now(),
    date : 3
}, action) => {
    switch (action.type) {
        case "FETCH_TIME":
            state = {
                ...state,
                time: action.payload
            };
            break
        case "INCREASE_DATE":
            state = {
                ...state,
                date : state.date + action.payload 
            };
            break;
        default:
            break;
    }
    return state;
}

export default timeReducer;

store.js

import {
  createStore,
  applyMiddleware,
  combineReducers
} from "redux";
import thunk from "redux-thunk";
import promiseMiddleware from 'redux-promise-middleware';
import logger from "redux-logger";
import {
  composeWithDevTools
} from 'redux-devtools-extension';
import timeReducer from "../reducers/timeReducer";
const store = createStore(combineReducers({
  timeReducer
}), {}, composeWithDevTools(applyMiddleware(thunk, promiseMiddleware, logger)));
export default store;

Answer 1

这不是你设置减速器的方式。您的减速器应该是一个函数 ，return 是新状态 。它不会修改作为参数传递给赋值的状态，Redux 的关键概念是不变性。每 the Redux documentation:

The reducer is a pure function that takes the previous state and an action, and returns the next state.

另外：

We don't mutate the state. We create a copy with Object.assign(). [...]

We return the previous state in the default case. It's important to return the previous state for any unknown action.

因此，您的减速器应如下所示：

switch (action.type) {
    case "FETCH_TIME":
        return {
            ...state,
            time: action.payload
        };
    case "INCREASE_DATE":
        return {
            ...state,
            date : state.date + action.payload 
        };
    default:
        return state; 
}

在上面的代码片段中，reducer 没有执行 state = { ... }，而是 return 应用程序的下一个状态 。在默认情况下，reducer 也应该只是 return 当前状态。你可以去掉最后的return.

为什么我的 Redux 操作没有触发 reducer？

Why isn't my Redux action triggering the reducer?

reactjs

redux

react-redux