异步逻辑

xxxxxxxxxx
//Product.js
const onAdd = () => {
        const name = nameRef.current.value
        // 触发添加商品的事件
        dispatch(addProduct({name}))
}

如果要让异步逻辑与Store交互，我们需要使用redux middleware。

Redux 有多种异步 middleware，每一种都允许你使用不同的语法编写逻辑。最常见的异步 middleware 是 redux-thunk，它可以让你编写可能直接包含异步逻辑的普通函数。

Redux Toolkit 的 configureStore 功能默认自动设置 thunk middleware，我们推荐使用 thunk 作为 Redux 开发异步逻辑的标准方式。

• Thunk 函数

  在Thunk函数中我们可以编写异步逻辑的代码（例如 setTimeout、Promise 和 async/await），并且可以通过参数获取到dispatch，getState()。从而在异步操作执行后再diapacth action。

  提示：

  Thunk 通常写在 “slice” 文件中。

  xxxxxxxxxx
  //slices/productSlice.js
  import { createSlice } from '@reduxjs/toolkit'
  
  //定义初始state
  //list表示商品列表，isLoading表示是否为正在请求数据的状态
  const initialState = { list: [] ,isLoading:false}
  
  //创建slice
  const slice = createSlice({
      //定义域名称
      name: 'product',
      //传入初始state
      initialState,
      //定义reducers
      reducers: {
          //这个reducer用来把商品数据存储到store中
          addProduct: (state, action) => {
  
              state.list.push(action.payload)
  
          },
          //这个reducer用来更改isLoading
          changeState:(state,action)=>{
              state.isLoading=action.payload
          }
  
      }
  })
  
  
  //导出action creator
  export const { addProduct ,changeState} = slice.actions
  
  //导出thunk函数
  //addProductAsync为thunk函数的创建函数，它返回一个thunk函数
  //返回的thunk函数中我们就可以编写异步代码了
  export const addProductAsync = (payload) => (dispatch, getState) => {
      //触发action ，改变isLoading的状态
      dispatch(changeState(true))
      setTimeout(() => {
          dispatch(addProduct(payload))
          //触发action ，改变isLoading的状态
          dispatch(changeState(false))
      }, 3000)
  }
  
  //导出reducer
  export default slice.reducer
  

  xxxxxxxxxx
  //pages/Product.js
  import React, { useRef } from 'react';
  import { useSelector, useDispatch } from 'react-redux'
  import { addProductAsync } from '../slices/productSlice'
  //引入thunk函数
  
  export default function Product() {
      const nameRef = useRef()
      const {list:productList,isLoading} = useSelector(state => state.product)
      const dispatch = useDispatch()
  
      const onAdd = () => {
          //thunk函数的使用，跟普通的action creator的使用一样
      
          dispatch(addProductAsync({ name: nameRef.current.value }))
      }
  
      return (
          <div>
              我是商品页面<br />
              商品名：<input ref={nameRef} required /><br />
              {isLoading?<div>请求数据中...</div>:productList.map((item, index) => <li key={index}>
                  商品名：{item.name}
              </li>)}
              
              <button onClick={onAdd}>新增商品</button>
  
  
          </div>
      );
  }
  
  

实时效果反馈

1. 下列说法错误的是:

A thunk middleware用来让异步逻辑与Store交互

B thunk函数的参数可以获取dispatch方法

C 可以dispatch一个thunk 函数的调用

D thunk函数中不能再次dispatch action

答案

1=>D