react redux、redux-thunk、react-redux的使用方法及实例

#react 中数据共享的几种方式 ##一、redux 用来共享数据

1.1纯redux的使用

1. 声明store：

const store = createStore(reducer, applyMiddleware(thunk));

2. 取值

 const { showNum, user } = store.getState();

3. 改变值的方法：

store.dispatch(createDelUse(2));
//actionCreater.js
export const createDelUse = (index) => {
    return {
        type: 'delUse',
        value: index
    }
}

4. 订阅redux store的变化

//react-app项目
var render = () => {
    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );
}
render();
store.subscribe(render);//订阅redux store的变化

1.2 redux 与 ’redux-thunk’的使用

redux-thunk 使得 store 可以dispatch异步方法 不只是disptach对象

 store.dispatch(initUserList());
//actionCreater.js
export const initUserList = () => {
    return (dispatch) => {
        debugger;
        setTimeout(() => {
            var userList = [{ name: 'zhao' }, { name: 'jing' }]
            dispatch({
                type: 'initUse',
                array: userList
            })
        }, 3000);
    }
}

1.3 redux 与 react-redux的使用

react-redux配合redux使用，将redux定义的store数据注入到组件中，可以使组件轻松的拿到全局状态，方便组件间的通信。使react组件与redux数据中心（store）联系起来。

1. 注入store数据 的方式 react-redux 的Provider

//react-app项目    App.js文件
import { Provider } from 'react-redux'
   <Provider store={store}>
        <SonFirst></SonFirst>
        <div>----------------------</div>
        <SonSecond></SonSecond>
   </Provider>

2. react-redux 获取且改变store数据 的方式

• 第一种获取store数据 改变store数据的方式 用connect

    //sonSecond.js
    import { connect } from 'react-redux'
    const mapStateToProps = (state) => {
        return {
            count: state.showNum.count, userList: state.user.userList
        }
    }
    const mapDispatchToProps = (dispatch) => {
        return {
            dispatch,
            //bindActionCreators 将dispatch绑定到actionCreators 方法上，这样只要执行actionCreator方法 就能触发store更新 不用每次都dispatch
            //…bindActionCreators(actionCreate, dispatch)
           delUse() {
                let action = createDelUse(2);
                dispatch(action);//dispatch一个action发给store
            }
        }
    }

    export default  connect(mapStateToProps, mapDispatchToProps)(SonSecond);

    //actionCreater.js
    export const createDelUse = (index) => {
        return {
            type: 'delUse',
            value: index
        }
    }
    const createAddUse = (val) => {
        return {
            type: 'addUse',
            value: { name: val }
        }
    }

• 第二种获取store数据 改变store数据的方法 用 useSelector useDispatch

   //sonSecond.js
   import { useSelector, useDispatch } from 'react-redux'
    //获取dispatch
    const dispatch = useDispatch();
    // 生成包装后的 actionCreator，执行之后就会触发 store 数据的更新
    const { createAddUse, createDelUse, initUserList } = useMemo(
        () => {
            console.log('useDispatch--dispatch', dispatch);
            return bindActionCreators(actionCreate, dispatch)
        },
        [dispatch]
    );
    //通过useSelector 获取数据
    const { count, userList } = useSelector((state) => ({
        count: state.showNum.count, userList: state.user.userList
    }));

三、createContext useContext的使用

// /store/index.js
import React, { useState, useReducer, createContext } from 'react'

const reducer = (state, action) => {
    switch (action.type) {
        case 'changeUse':
            return { ...state, user: action.value }
            breack;
        case 'changeProject':
            return { ...state, projectId: action.value }
            breack;
        default:
            return state;
    }

}
export function useStoreState(initState) {
     //initialState: { userInfo: res }
    // const [state, dispatch] = useReducer(reducer, initState);
    return useReducer(reducer, initState);
}
export const AppContext = createContext();


//_app.js文件 nextjs项目 主要入口文件
import { useStoreState, AppContext } from '../store/index'
function MyApp(props) {
    //初始值
    const { Component, pageProps, initialState } = props;
    const store = useStoreState(initialState);

    return (<AppContext.Provider value={store}>
        <Component {...pageProps} />
    </AppContext.Provider>)
}

//index.js文件 页面文件
import {  AppContext } from '../store/index'
export default function Home() {
    //获取值 方法
    const [state, dispatch] = useContext(AppContext)
    console.log('首页刷新', state, dispatch);
  return (
        <div className={styles.container}>
            <div>用户名字是{state.userInfo.uname}</div>
        </div>
    )
}