React中reducer的拆分,react redux hooks及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

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(
    <Provider store={store}>
        <App />
    </Provider>,
    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(
        <Fragment>
            <h1>我是App件哦!! </h1>
            <p>num的值为: {state.num}</p>
            <button onClick={()=>{
                /* 1. 原始的 dispatch 方法 */
                // dispatch({
                //     type:'ADD',
                // })

                /* 2. 使用异步中间件redux-thunk之后, 封装的 dispatch 方法可以接收一个函数 */
                // redux-thunk 给我们封装了dispatch, 使得 dispatch可以接收一个函数作为参数
                // 我们可以在这个函数里做异步处理, 然后再 通过函数里注入的 dispatch 更新state
                dispatch(function (dispatch,getState) {
                    (function axiosFn(){
                        // 可以在 redux-thunk封装后的dispatch里做异步处理
                        // 异步处理完之后再 更新 state
                        const payload = {result:'我是请求返回来的数据'};
                        dispatch({
                            type:'ADD',
                            payload,
                        })
                    }())
                })
            }}>点我 + 1</button>
        </Fragment>
    )
}
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