如何在 createAsyncThunk return 承诺时更新组件（react/redux 工具包）

Question

我有一个异步函数，它向数据库发送一个更新计数的请求，这个函数return一个类似的承诺

{Nome: "a", Valor: 1700, Historico: "teste", Documento: 1, DataEmissao: "2020-12-24T00:00:00.000Z", …}
DataEmissao: "2020-12-24T00:00:00.000Z"
DataVencimento: "2020-12-24T00:00:00.000Z"
Documento: 1
Historico: "teste"
Nome: "a"
Valor: 1700
createdAt: "2021-03-30T14:13:31.404Z"
id: "6063320bafd21c22e45f404c"
updatedAt: "2021-03-31T14:56:43.873Z"
__v: 0
__proto__: Object

这是我的数据已更新，但我不知道如何发送此数据以覆盖我的组件和存储中的旧数据，我的组件只是在我重新加载页面时更新，我的应用程序再次发送请求到加载数据库数据，我尝试使用 createEntytyAdapter 但我不能。

这是我的代码

export const editCount = createAsyncThunk('contas/editCount', async (data) => {
    const dados = data;
    axios.post('http://localhost:8080/api/teste/' + dados.documento, {

        Documento: dados.documento,
        Nome: dados.nome,
        Valor: dados.valor,
        Historico: dados.historico,
        DataEmissao: dados.dataEmissao,
        DataVencimento: dados.dataVencimento

    }).then(function (response) {
        console.log('teste', response.data)
        return response.data;
    }).catch(function (error) {
        console.log(error)
    })
})
const ContasReducer = createSlice({
    name: sliceName,
    initialState: {
        contas: [],
        status: null
    },
    reducers: {

    },
    extraReducers: (builder) => {
        
       builder.addCase(fetchCounts.fulfilled , (state, { payload }) => {
            state.contas = payload
            state.status = 'success'
        })
        builder.addCase(fetchCounts.pending , (state, action) => {
            state. status = 'Loading'
            state. contas = [{}]
        })
        builder.addCase(createAcount.fulfilled , (state, action) => {
            state = action.payload
            console.log('action payload', action.payload)
        })
        // this is my reducer
        builder.addCase(editCount.fulfilled , (state, action) => {
            state.conta = action.meta.arg;
            console.log('reducer',action.meta.arg)
        })

    }
})

//My component 
 function SalvarDados() {
        
        Dispatch(
            editCount({
                documento: Documento,
                nome: Nome,
                valor: Valor,
                historico: Historico,
                dataEmissao: new Date(DataEmissao),
                dataVencimento: new Date(DataVencimento),
            })
        )
        props.CloseModal()
    }

@解决了我调用 api 的异步函数没有 return 承诺，因为 .then 不在 axios.post 前面，我的代码已修复

export const editCount = createAsyncThunk('contas/editCount', async (data) => {
    const dados = data;
    const response = await axios.post('http://localhost:8080/api/teste/' + dados.documento, {

        Documento: dados.documento,
        Nome: dados.nome,
        Valor: dados.valor,
        Historico: dados.historico,
        DataEmissao: dados.dataEmissao,
        DataVencimento: dados.dataVencimento

    })
    return response.data;
})
//My extra reducer
builder.addCase(editCount.fulfilled , (state, {payload}) => {
            const [data] = payload;
            const conta = state.contas.findIndex((obj) => obj.Documento === data.Documento)
            const newConta = [ ... state.contas].splice(conta, data)
            state.contas = payload;
        
        })

我希望这个post可以帮助别人

Answer 1

您的 createAysncThunk 实际上 return 没有数据。 return response.data; 是 .then 回调函数的 return，而不是 thunk 本身。您需要在 axios.post 前面添加 return 以 return 整个承诺。

return axios.post(...)
  .then((response) => response.data);

如果您 catch 在这里出错，那么您的 thunk 将永远是 fulfilled 而不是 rejected。最好让错误被抛出。中间件会捕获它们。

这是一个 async 函数，因此您还可以 await Promise。

const response = await axios.post(...);
return response.data;

如何在 createAsyncThunk return 承诺时更新组件（react/redux 工具包）

How update the component when the createAsyncThunk return a promise (react/redux toolkit)

reactjs

redux-thunk

redux-toolkit