Question

我将Redux与react和redux-thunk用作中间件。

当我发出http请求时，我必须在thunk中调度三个动作。我将使用我的身份验证示例。

这是我的动作：

export const loginSuccess = () => ({
  type: AUTH_LOGIN_SUCCESS,
})

export const loginFailure = (errorMessage) => ({
  type: AUTH_LOGIN_FAILURE,
  errorMessage,
})

export const loginRequest = () => ({
  type: AUTH_LOGIN_REQUEST,
})

这是结合了以上三个动作的重击：

export const login = (credentials) => dispatch => {
  dispatch(loginRequest())
  const options = {
    method: 'post',
    url: `${ENDPOINT_LOGIN}?username=${credentials.username}&password=${credentials.password}`,
  }
  axiosInstance(options)
    .then(response => {
      dispatch(loginSuccess())
      dispatch(loadUser(response.data)) // I have separate action for user and separate reducer.
      window.localStorage.setItem(ACCESS_TOKEN_KEY, response.data.token)
    })
    .catch(error => {
      return dispatch(loginFailure(error))
    })
}

这是我的减速器：

const initialState = {
  pending: false,
  error: false,
  errorMessage: null,
}

export const loginReducer = (state = initialState, action) => {
  switch (action.type) {
    case AUTH_LOGIN_SUCCESS:
      return {
        ...state,
        pending: false,
        error: false,
        errorMessage: null,
      }
    case AUTH_LOGIN_FAILURE:
      const { errorMessage } = action
      return {
        ...state,
        pending: false,
        error: true,
        errorMessage,
      }
    case AUTH_LOGIN_REQUEST:
      return {
        ...state,
        pending: true,
      }
    default:
      return state
  }
}

在发送另一个请求时，例如在注销的情况下，我必须做几乎完全相同的事情。我感觉自己在重复很多次，必须有更好的方法。

我需要知道解决此问题的最佳实践。

任何其他更正和建议将不胜感激。

Answer 1

如果您正在寻找“即用型”解决方案，请查看：

https://redux-toolkit.js.org/api/createAsyncThunk
https://redux-resource.js.org/（但它是用js（不是TS）编写的，并且此库没有@types定义）

如果您正在寻找定制解决方案，则可以创建一些工厂：

减速机工厂
三个行动的工厂
暴徒工厂

const actions = createActions('My request name');
const reducer = createReducer(actions);
...
const thunk = createThunk(config);

或者甚至可以将它们组合在一起：

const { actions, reducer, thunk } = createRequestState('Name...', config);

...但这只是一个主意。

Redux请求状态。减少样板

1 个答案: