提交后负责显示我所有交易的组件都没有更新

Question

我使用的是带有React的Redux Toolkit并具有基本设置，因为我正在构建一个简单的费用跟踪器，因此我有两个操作：获取所有交易并添加新的交易。就是这样。

我的问题：创建新事务时，负责显示我的数据的组件不会更新，我只能在刷新页面后看到更改。 您可以在下面看到我的transactionslice文件：

const initialState = {
    transactions: [],
    loading: false,
    error: null,
}

export const getTransactions = createAsyncThunk(
    "transactions/getTransactions",
    async () => {
        const res = await axios.get('http://localhost:8000/transactions')
        return res.data
    }
)

export const addTransaction = createAsyncThunk(
    "transaction/addTransaction",
    async(data) => {
       const res = await axios.post('http://localhost:8000/transactions', data);
        return res.data
    }
)

const transactionsSlice = createSlice({
    name: 'transactions',
    initialState,
    reducers: {},
    extraReducers: {
        [getTransactions.pending]: (state) => {
            state.loading = true;
        },
        [getTransactions.fulfilled]: (state, {payload}) => {
            console.log(payload);
            state.loading = false;
            state.transactions = payload;
            state.error = ''
        },
        [getTransactions.rejected]: (state) => {
            state.loading = false;
            state.error = state.error.message;
        },
        [addTransaction.pending]: (state) => {
            state.loading = true;
        },
        [addTransaction.fulfilled]: (state) => {
            state.loading = false;           
        },
        [addTransaction.rejected]: (state) => {
            state.loading = false;
            state.error = state.error.message;
        }
    }
});

这是我显示所有交易的组件中的代码，

 const { transactions, loading } = useSelector(selectAllTransactions);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getTransactions());
  }, [dispatch]);

但是当我提出职位时，请求我的状态我的所有交易都不会立即更新。我只有在更新页面并且正在手动执行此页面时才能看到更改。我想知道，如果我有效果观察更改，为什么会发生这种情况？

AddTransaction.js文件：

const [transactionName, setTransactionName] = useState('');
  const [amount, setAmount] = useState('');

  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      transactionName,
      amount
    }
    
    if(transactionName && amount){
      dispatch(addTransaction(data));
      dispatch(getTransactions());
      setTransactionName('')
      setAmount('');
    }

  }

我已经尝试使用Google Google，但是我的疑问似乎很愚蠢，以至于我什至找不到答案。 这是我的服务器文件：

app.post('/transactions',(req, res) => {
    const {transactionName, amount} = req.body;
    const query = `INSERT INTO transactions (title, amount) 
                        VALUES ("${transactionName}", "${amount}")`

    db.query(query, (err, result) => {
        if(err){
            console.log(err)
        }
        res.send(result)
    })
    
});

我缺少什么吗？有人可以向我解释为什么负责显示所有交易的组件在提交后没有更新？

Answer 1

尝试执行getTransactions一旦addtransaction（data）是完成，而不是同时：

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      transactionName,
      amount
    }
    
    if(transactionName && amount){
      dispatch(addTransaction(data))
        .then(() => {
          dispatch(getTransactions())
          setTransactionName('')
          setAmount('')
        }
    }
  }