Question

我有一些使用React和Redux的经验

坦率地说，直到现在，我通常只是复制粘贴代码而没有理解正在发生的事情。

（正在尝试使用Vuex时）我在考虑减速器的工作原理，这使我想到以下问题

 import {
        MEETUP_GROUP_DATA_SUCCESS,
        MEETUP_GROUP_DATA_LOADING,
        MEETUP_GROUP_DATA_ERROR,
        GOOGLE_PROFILE_LOGOUT
    } from "./../config/type.js"

const intialState = {
    meetupProfileData: null,
    meetupProfileLoading: null,
    meetupProfileError: null,  
}

export default function (state = intialState, action) {

    switch (action.type) {
        case MEETUP_GROUP_DATA_LOADING:
            return {
                ...state,
                meetupProfileLoading: true
            }
        case MEETUP_GROUP_DATA_SUCCESS: 
            return {
                ...state, 
                meetupProfileLoading: false, 
                meetupProfileError: false,
                meetupProfileData: action.payload,
            }
        case   MEETUP_GROUP_DATA_ERROR:
            return {
                ...state,
                meetupProfileLoading: false, 
                meetupProfileError: action.payload,
            }
        case  GOOGLE_PROFILE_LOGOUT: 
            return {
                ...state, 
                meetupProfileLoading: null, 
                meetupProfileError: null,
                meetupProfileData: null,
            }
        default:
            return state
    }

}

请注意我们的const intitalState

现在，假设已调度一个动作。这将使redux调用此函数

export default function (state = intialState, action) {

在这里，我们的状态等于initialState 。因此，每次我们都调度一个动作，其状态应等于intialState？因为我们说的是state = intialState

那么...state在这里有什么用？如果您要说“ 它复制了先前状态” ，那么请提及我们的状态将如何复制先前状态，因为每次调度动作时，我们的状态都等于初始状态并且我们的初始状态的所有参数都为null

Answer 1

此声明

export default function (state = intialState, action) { }

说是第一次使用intialState对其进行初始化。

...state

就像复制状态，然后我们在返回状态/对象的同时更改值。

Answer 2

参数state = initialState表示state默认为initialState（如果未提供）。 Redux会一开始就调用您的reducer来“初始化”您的状态，这意味着它将使用null或undefined来调用reducer。由于在这种情况下将state设置为initialState并返回该值，因此Redux将收到您已设置的初始状态。

所有后续调用都将使用新状态-因此，当化简器收到将更改某些内容的操作时，您需要使用相关的更新再次返回整个状态。

返回{ ...state, somethingToUpdate: "foo" }意味着您实际上是将state变量复制到新对象中，并用somethingToUpdate覆盖"foo"键。

基本上，Redux仅调用您的reducer，并且如果reducer收到它不关心的操作，它需要返回当前状态。如果您碰巧不返回任何内容（也许忘记了在交换机中添加default: return state），则该状态会再次获得undefined，并且由于函数中提供的默认参数而将重置为initialState签名（state = initialState。

redux自定义减速器如何与Thunk合作

2 个答案: