标签: redux-thunk

我对 redux 比较新。我已经阅读了很多文章，但我仍然没有清楚地了解使用的真正好处是什么redux-thunk。

我所理解的是它允许您返回一个函数而不是来自action-creators?的对象。但有什么好处呢？我在没有使用 redux-thunk 的情况下创建了一些小型 React 项目。

让我们考虑以下片段。两者的行为相同。

如果有人可以向我解释或向我指出正确的资源以更好地理解，那将会有很大的帮助。

With redux-thunk

export function fetchContacts(){
  return function(dispatch){
    axios
      .get('/contacts')
      .then( contacts => dispatch({ type: 'FETCH_CONTACTS', payload: contacts}))
  }
}

Without redux-thunk

const client = axios.create({
  baseURL: "http://localhost:3000",
  headers: {
    "Content-Type": "application/json"
  }
})
const url = '/contacts';
export function fetchContacts(){
  return {
    type: 'FETCH_CONTACTS',
    payload: client.get(url)
  }
}

我正在开发一个小型 React 应用程序，它使用 Redux 进行状态管理。

下表显示了从 REST 后端检索的动态对象列表，该后端是通过 Spring 在 Java 中实现的。目前，我必须单击一个按钮才能添加最新的数据增量（到 Redux 存储）。

该表应该以高性能的方式自动更新。我发现了一个 hacky 解决方法，递归地使用Window 的 setTimeout方法定期从后端获取数据，但我不喜欢这个解决方案。

我可以使用哪些框架、工具或方法来自动更新，并与 React、Redux、React Redux 和 Redux Thunk 很好地集成？

下面的代码来自 Brad Traversy 在 MERN 堆栈上的 Udemy 课程。我是 Redux 和 Redux Thunk 的新手，我正在尝试了解其目的=> dispatch =>是什么。我知道它来自 Redux Thunk，它是在 Redux 存储文件中设置的。我认为dispatch这里使用 是为了从此函数中分派多个操作，并阅读该= ([arg(s)]) => dispatch =>语法是柯里化的一个示例（尽管这似乎并不正确，因为柯里化每个函数都有一个参数）。

我非常感谢任何帮助理解=> dispatch =>。

（其他令人困惑的小点：在课程中，该函数setAlert被称为动作，但我不确定这是正确的，因为它包含多个动作分派。）

export const setAlert = (msg, alertType, timeout = 5000) => dispatch => {
  const id = uuidv4();
  dispatch({
    type: SET_ALERT,
    payload: { msg, alertType, id }
  });

  setTimeout(() => dispatch({ type: REMOVE_ALERT, payload: id }), timeout);
};

我正在使用redux-toolkitwithcreateAsyncThunk来处理异步请求。

我有两种异步操作：

1. 从 API 服务器获取数据

2. 更新 API 服务器上的数据

export const updateData = createAsyncThunk('data/update', async (params) => {
  return await sdkClient.update({ params })
})

export const getData = createAsyncThunk('data/request', async () => {
  const { data } = await sdkClient.request()
  return data
})

我把它们extraReducers加到一片里

const slice = createSlice({
  name: 'data',
  initialState,
  reducers: {},
  extraReducers: (builder: any) => {
    builder.addCase(getData.pending, (state) => {
      //...
    })
    builder.addCase(getData.rejected, (state) => {
      //...
    })
    builder.addCase(
      getData.fulfilled,
      (state, { payload …

我正在尝试redux-thunk使用 Typescript键入检查我的代码。

从 Redux: Usage with Redux Thunk的官方文档中，我们得到了这个例子：

// src/thunks.ts

import { Action } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

export const thunkSendMessage = (
  message: string
): ThunkAction<void, RootState, unknown, Action<string>> => async dispatch => {
  const asyncResp = await exampleAPI()
  dispatch(
    sendMessage({
      message,
      user: asyncResp,
      timestamp: new Date().getTime()
    })
  )
}

function exampleAPI() {
  return Promise.resolve('Async Chat Bot')
}

为了减少重复，您可能希望在您的商店文件中定义一次可重用的 AppThunk …

我正在从 Apollo 客户端迁移到 Redux 工具包，我很困惑如何在我的 React 组件中使用 API 调用的结果（成功或错误）createAsyncThunk和 call history.push('/')and 。setSubmitting(false)

示例我如何使用Formikand Apollo Client：

      onSubmit={async (values, { setSubmitting }) => {
    signInMutation({
      variables: {
        email: values.email,
        password: values.password,
      },
    }).then(
      (response) => {
        if (response.data.signIn.accessToken) {
          localStorage.setItem(
            AUTH_TOKEN,
            response.data.signIn.accessToken,
          );
          if (response.data.signIn.User.isNew) {
            history.push('/welcome-page');
          } else {
            history.push('/');
          }
          setSubmitting(false);
        }
      },
      (err) => {
        console.log(`error signin ${err}`);
        enqueueSnackbar(err.message, {
          variant: 'error',
        });
        setSubmitting(false);
      },
    );

我实际上正在将一些代码迁移到打字稿，所以我对所有这些类型的东西都是新手。当我将 redux-thunk 与常规 javascript 一起使用时，调度方法返回一个承诺，帮助我处理错误和其他内容。行动是这样的：

export const login = ({email, password}) => {
    return async function (dispatch) {
        try {
            const result = await api.post(`/auth/login`, {username, password});
            return dispatch({type: 'set_user_session', payload: result.data});
        } catch (err) {
            throw (err.response && err.response.data) || {code: err};
        }
    };
};

然后我使用 useDispatch 钩子正常调用：

const dispatch = useDispatch();
...
dispatch(login({username: "admin", password: "adminpassword1"}))
    .then(d => console.log("ok"))
    .catch(err => console.log(err));

现在我已将代码迁移到打字稿，操作现在如下所示：

export const login = ({username, password}: Credentials): ThunkAction<Promise<Action>, {}, {}, AnyAction> => {
    // Invoke …

我一直在研究使用 React、Redux 和 Thunk 创建通用模态。理想情况下，我的状态如下所示：

export interface ConfirmModalState {
  isOpened: boolean;
  onConfirm: null | Function
}

export const initialConfirmModalState: ConfirmModalState = {
  isOpened: false,
  onConfirm: null
};

然而，这意味着将不可序列化的数据放入状态，这似乎是非常不鼓励的。

我已经阅读了markerikson 的一篇很棒的博文。但是，我认为提议的解决方案不适用于异步操作和 Thunk。

你建议如何解决这个问题？

我正在开发一个 React Native 应用程序。我有一个注册屏幕，其中有一个按钮，onclick：

const handleClick = (country: string, number: string): void => {
    dispatch(registerUser({ country, number }))
      .then(function (response) {
        console.log("here", response);
        navigation.navigate(AuthRoutes.Confirm);
      })
      .catch(function (e) {
        console.log('rejected', e);
      });
  };

注册用户函数：

export const registerUser = createAsyncThunk(
    'user/register',
    async ({ country, number }: loginDataType, { rejectWithValue }) => {
        try {
            const response = await bdzApi.post('/register', { country, number });
            return response.data;
        } catch (err) {
            console.log(err);
            return rejectWithValue(err.message);
        }
    },
);

我有一个extraReducers确实被称为的东西，证明它被有效地拒绝了。

.addCase(registerUser.rejected, (state, {meta,payload,error }) …

getDefaultMiddleware更新后我收到一个已弃用的警告"@reduxjs/toolkit": "^1.6.1"那么我应该如何删除这个警告。我们还有其他方法可以在configureStore函数中注入默认中间件吗？

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import reducer from "./reducer";
import api from "./middleware/api";
export default function storeConfigure() {
   const store = configureStore({
   reducer,
   middleware: [
      ...getDefaultMiddleware(), 
      api
    ],
  });
  return store;
}

任何帮助表示赞赏谢谢！