爲什麼我的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

這不是如何你設置了你的減速器。你的減速器應該是一個功能，它返回新的狀態。它不會修改作爲賦值參數傳遞的狀態，Redux的關鍵概念是不可變的。每the Redux documentation：

減速機是一個純粹的函數，它以前的狀態和動作，以及返回下個狀態。

和額外的：

• 我們不變異的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 = { ... }，減速，而不是返回應用程序的下一個狀態。在默認情況下，還原器應該只返回當前狀態。你可以擺脫最後的return。