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

那不是你如何设置你的减速机。您的reducer应该是一个返回新状态的函数。它不会修改作为赋值的参数传递的状态，Redux的关键概念是不变性。每the Redux documentation：

reducer是一个纯函数，它采用先前的状态和一个动作，返回下一个状态。

另外：




我们不会改变state 。我们使用Object.assign()创建副本。 [...]



我们返回state案例中的上一个default。对于任何未知动作返回先前状态非常重要。



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

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

在上面的代码段中，而不是执行state = { ... }，而是而不是返回应用程序的下一个状态。在默认情况下，reducer也应该返回当前状态。你可以摆脱最后的return。

为什么我的Redux动作不能触发减速器？

1 个答案: