redux的hooks改写步骤

1、安装

npm i redux

2、在src目录下新建一个store文件夹

index.js中

import { createStore } from "redux";

// 导入纯函数
import reducer from "./reducer";

// 创建store实例（在整个应用中是唯一），可以为整个应用的所有组件共享
export default createStore(reducer);

reducer.js中

// 纯函数
// 参数一：state,store中的数据
// 参数二：action，负责接收action（一般是一个对象：{type:'',payload:''}）

var initialState={
count:0,
zt:true
}
// 定义纯函数，并导出该函数
export default function reducer(state=initialState,action){
// 判断动作类型，根据不同的类型，执行不同的业务操作
if(action.type == 'ADD'){
   // 执行
   state.count++
}else if(action.type == 'DELETE'){
    state.count--
}else if(action.type == 'XXX'){

}

// 一定不要忘了修改后的state
return state;
}

3、之前是在每个组件中导入仓库，现在使用hooks

npm i react-redux

index.js中

import { Provider } from 'react-redux';
import store from './store/index';


<Provider store={store}>
   <App />
   </Provider>

内层组件获取仓库写法 (不推荐使用这种写法)

// 在App.js中

// 1、导入
import { connect } from 'react-redux';

function App(props) {

  return (
    <div className="App">
    {//3、拿到值}
     {props.count}
      {//3、操作值}
     <button onClick={()=>{props.add()}}>jia</button>
     <button onClick={()=>{props.delete()}}>jian</button>
    </div>
  );
}

// 2、最底下
export default connect(
  (state)=>{
   return {
    count:state.count
   }
  },
   (dispatch)=>{
    return {
      add(){
        dispatch({type:'ADD',payload:null})
      },
      delete(){
        dispatch({type:'DELETE',payload:null})
      }
    }
  }
)(App);

但是前面都有props，分不清是仓库还是父传子

内层组件获取最终写法

解决：useSelector ,useDispatch

// 1、导入
import { useSelector,useDispatch } from 'react-redux';
function App(props) {
 // 2、获取仓库中count 也可以直接获取整个仓库对象不加那个.count就行
  var count=useSelector(state=>state.count)

   //2、使用useDispatch()获取dispatch函数
var dispatch=useDispatch()
var add=()=>{
  dispatch({type:'ADD',payload:null})
}
  var jian=()=>{
  dispatch({type:'DELETE',payload:null})
}
  
  return (
    <div className="App">
          {//3、使用}
     count: {count}
     <button onClick={()=>{add()}}>jia</button>
     <button onClick={()=>{jian()}}>jian</button>
   
    </div>
  );
}
 export default App;