React|React中reducer的拆分,react redux hooks及redux-thunk中间件使用 reduxhook|redux-thunk中间件|reduce

文章目录

react中 reducer的拆分,react redux hooks
react redux hooks

useSelector
useStore
useDispatch

redux 中间件 - redux-thunk

react中 reducer的拆分,react redux hooks

combineReducers 官网的介绍

combineReducers(reducers)
复杂数据下 reducer 的拆分,案例代码如下:

import {combineReducers} from "redux"; /* 原始: reducer function reducer(state={ list: { tab: "all", page: 1, data: [] }, article: { detail: {}, message:[] } },action){ switch(action.type){} return state; } */ // 拆分// 负责处理 list 的数据 function listReducer(list={ tab: "all", page: 1, data: [] },action){ switch(action.type){ case "LIST_ADD": let {data} = list; data.push("a"); return { ...list, data } } return list; }// 负责处理 article 的数据 function article(article={ detail: {}, message:[] },action){ switch(action.type){ case "ARTICLE_ADD": let {message} = article; message.push("b"); return { ...article, message } } return article; }#1. 不利用 combineReducers 的时候, 自己手动写函数合并reducer // function reducer(state={},action){ //return { //list:list(state.list,action), //article: article(state.article,action) //} // }#2. 利用提供的 combineReducers API 合并多个reducer const reducer = combineReducers({ listReducer, article }); // console.log(reducer); export default reducer;

由 combineReducers() 返回的 state 对象，会将传入的每个 reducer 返回的 state 按其传递给 combineReducers() 时对应的 key 进行命名。即: combineReducers 会将拆分的单个 reducer 包装到一个大的 state 对象中集中返回.

react redux hooks

react-redux 新增的 hooks :
相比于之前的 react-redux 的用法写起来比较麻烦, 之前要用 connect 方法对组件进行高级组件的包装, 而现在的 react-redux 给我们提供了几个常用的 hooks 来获取 store ,state 和 dispatch 方法等, 新增 hooks 如下:

- useStore - useDispatch - useSelector

useSelector

【React|React中reducer的拆分,react redux hooks及redux-thunk中间件使用】useSelector 用来获取 store 中的 state 状态数据.

useSelector 接收一个函数作为参数

这个函数接收一个 state 参数, 返回一个 state

#1. useSelector 接收一个函数作为参数 #2. 回调函数接收一个 state 作为参数, 返回一个 state const state = useSelector((state)=>{ return state });

useStore

useStore 用来获取 store 的整个 store 对象. 用法如下:

const store = useStore() console.log(store);

useDispatch

useDispatch 用来获取 dispatch .

const dispatch = useDispatch();

redux 中间件 - redux-thunk

中间件的概念: 在真正去修改 reducer 之前，做一些处理，比如我们的副作用，如：数据请求，数据验证……

applyMiddleware()

redux-thunk

案例代码演示如下:
src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux' import App from './App'; import store from './redux/index'ReactDOM.render( , document.getElementById('root') );

src/App.js

import React,{Fragment,useEffect} from 'react' import{useSelector,useDispatch} from 'react-redux'function App(props) { const state = useSelector((state)=>{ return state}); const dispatch = useDispatch(); useEffect(()=>{ console.log('组件挂载了哦, state值为 -->>',state); },[]); return( 我是App件哦!! num的值为: {state.num} ) } export default App

src/redux/index.js

import {createStore,applyMiddleware} from 'redux' import thunk from 'redux-thunk'function reducer(state = { num: 1, }, action) { console.log('action执行了哦 --->>>',action); switch (action.type) { case 'ADD': return { num: state.num+1 } } return state } // 如果不使用 applyMiddleware(thunk) 中间件, 那么 redux 中的dispatch(action)中的action // 必须是一个简单的对象, 而使用 applyMiddleware(thunk) 之后, redux-thunk给我们封装了 // dispatch方法, 使得 dispatch可以接收一个函数作为参数. dispatch(function(){}) const store = createStore(reducer); // const store = createStore(reducer,applyMiddleware(thunk)); export default store