某些动作调用后，Redux 自动 return initalState

Question

我正在自动使用 react-redux 和 reducer return 调用操作时的初始状态，例如（给定代码）当我自动调用 fetchPost 操作或 createPost 操作时我的 Auth reducer return初始状态。为什么会这样，所以我正在使用 redux-thunk 和带有 feathersJS 的后端。


export const login = (payload) => dispatch => {
    AsyncStorage.getItem('feathers-jwt').then(r => {
        dispatch({ type: 'CHECK_AUTHORIZATION', payload: r })
    }).catch(() => {
        client.authenticate({
            strategy: 'local',
            email: payload.email,
            password: payload.password
        }).then(r => {;
            dispatch({ type: 'LOGIN_REQUEST', payload: r })
        }).catch(e => {
            dispatch({ type: 'LOGIN_ERROR', payload: e.message })
        })
    })
}

export const checkAuthorization = () => dispatch => {
    AsyncStorage.getItem('feathers-jwt').then(r => {
        dispatch({ type: 'CHECK_AUTHORIZATION', payload: r });
     return client.passport.verifyJWT(r);
        }).then(payload => {
            dispatch({ type: 'JWT_PAYLOAD', payload: payload })
            return client.service('users').get(payload.userId);
        }).then(user => {
            client.set('user', user);
            client.get('user').then(user => {
                dispatch({ type: 'PROFILE', payload: user })
            })
        })
    .catch(() => {
        dispatch({ type: 'AUTHORIZATION_FAILED' })
    })
}

export const logout = (payload) => dispatch => {
    client.logout().then(r => dispatch({ type: 'LOG_OUT', payload: r }))
}

import actions from './actions';
import AsyncStorage from '@react-native-community/async-storage';

const initalState = {
  users: [],
  isAuthenticated: false,
  accessToken: null,
  profile: null,
  isVendor: false,
  isConsumer: false,
  errorMessage: null,
  jwtPayload: null
};

export default (state = initalState, action) => {
    switch (action.type) {
        case 'CHECK_AUTHORIZATION':
            return Object.assign({}, state, {
                accessToken: action.payload,
                isAuthenticated: true
            })
        case 'AUTHORIZATION_FAILED':
            return Object.assign({}, state, {
                isAuthenticated: initalState.isAuthenticated
            })
        case 'LOGIN_REQUEST':
            return (
                Object.assign({}, state, {
            accessToken: action.payload.accessToken,
            isAuthenticated: true,
        }));
        case 'JWT_PAYLOAD':
            return Object.assign({}, state, {
                jwtPayload: action.payload
            })
        case 'PROFILE':
            return Object.assign({}, state, {
                profile: action.payload
            })
        case 'LOGIN_ERROR':
            return Object.assign({}, state, {
                errorMessage: action.payload.message
            })
        case 'LOG_OUT': 
            return Object.assign({}, state, {
                isAuthenticated: initalState.isAuthenticated,
                accessToken: null
            })
        default:
            return initalState;
        }
}

Answer 1

尝试将默认值设置为

默认： return状态；

而不是默认： return初始状态；

Answer 2

有时，我们可能会在提交表单时调用操作。然后页面重新加载，整个 redux 从头开始初始化。

举个例子，

<form>
  <button type="submit" onClick={()=>dispatch(someAction)}>Foo</button>
</form>

以上代码将调用该操作，redux 将再次初始化。

某些动作调用后，Redux 自动 return initalState

Redux automatically return initalState after some action call

react-native

feathersjs

redux

redux-thunk

react-redux