redux原理理解及使用基础

state

state是一个对象，是存在全局的状态

const initialState = {
  msg : 'dog'
}

action

action是一个带有type的对象，可以看作为发出改变状态的一个指令，视为描述在应用程序中发生了什么。

const action = {
  type : 'SET_MSG',
  payload : 'cat'
}

reducer

reducer是一个函数，接受state和action两个参数，返回一个改变后的新state

const initialState = { msg : 'dog' }

const reducer = (state= initialState,{type,payload}) => {
  if(type==='SET_MSG'){
    return { ...state, ...{ msg: payload } };
  }
  return state;
}

模拟redux

使用发布订阅者模式mitt包模拟实现
创建getState方法获取数据，创建dispatch方法发布action指令使reducer处理数据，创建subscribe方法监听state的改变。

store.js

const initialState = { msg : 'dog' }

const reducer = (state= initialState,{type,payload}) => {
  if(type==='SET_MSG'){
    return Object.assign(state, { msg: payload })
  }
  return state;
}

export default {
  getSate(param){
    return initialState[param]
  },
  dispatch(action) {
    reducer(initialState, action)
    emitter.emit('msgChange')
  },
  subscribe(callBack) {
    emitter.on('msgChange', () => {
      callBack()
    })
  }
}

在子组件中发起改变src/index/index.js

import store from '../store'
const Index = () => {
  const change = () => {
    store.dispatch({ type: 'SET_MSG', payload: 'cat' })
  }
  return (
    <div>
      <p>——————————组件index——————————</p>
      <button onClick={change}>按钮</button>
      <p>——————————组件index——————————</p>
    </div>
  )
}
export default Index

在父组件中接受改变后的数据src/App.js

import { useState, useEffect } from 'react'
import store from './store';
import Index from './index/index'
const App = () => {
  const [msg, setMsg] = useState(store.getState().msg)
  useEffect(() => {
    store.subscribe(() => {
      setMsg(store.getState().msg)
    })
  }, [])
  return (
    <div>
      <Index />
      {msg}
    </div>
  );
}
export default App;

使用redux

redux直接提供的getState三个方法，store文件中方法便可以改为

store.js

import { createStore } from "redux";

const initialState = { msg : 'dog' }

const reducer = (state= initialState,{type,payload}) => {
  if(type==='SET_MSG'){
    return Object.assign(state, { msg: payload })
  }
  return state;
}

export default createStore(reducer);

在组件中的使用方法并未改变～

优化rudex的使用

经过上面的的使用不难看出写法非常难受，每有一个状态就要写一个if或者switch，action要传的type也是东一个西一个，如果要改动很不方便，所以我们针对这两点优化一下
首先

创造一个action生成器的生成器，放在store/redux-helper.js中

export const creatActionCreator = (type) => {
  const actionCreator = (payload) => {
    return { type, payload };
  };
  return actionCreator;
}

提取action统一管理type，放在store/action-creator.js中

import { creatActionCreator } from "./redux-helper";

export const setMsg = creatActionCreator("SET_MSG");

然后

独立出一个处理数据的方法，放在store/redux-helper.js中

export const creatReducer = (handlers, initialState) => {
  const reducer = (state = initialState, action) => {
    let res = initialState
    for (const key in handlers) {
      if (action.type === key) {
        res = handlers[key](state, action);
      } 
    }
    return res
  };
  return reducer;
};

这样使用起来就会美观一些
store/index.js

import { createStore } from "redux";
import { creatReducer } from "./redux-helper";
import { setMsg } from "./action-creator";

const initialState = {
  msg: "dog",
};
const reducer = creatReducer(
  {
    [setMsg().type](state, action) {
      return { ...state, ...{ msg: action.payload } };
    },
  },
  initialState
);
export default createStore(reducer);

更新就变成了

store.dispatch(setMsg('cat'));

然而这两个优化已经有人帮我们做了，不需要我们再重复造轮子，可以到github上看这个包redux-toolkit。

使用redux-toolkit

redux-toolkit这个官方的工具包有两个非常好用的东西，一是在谷歌浏览器中的调试工具redux devtools，二是切片(slice)
切片我很喜欢，因为是在是简化的太多啦！！！

import { configureStore, createSlice } from "@reduxjs/toolkit";

const initialState = {
  msg: "dog",
};

// slice包含 action、reducer,如果有需要可以后期结构出来用
const slice = createSlice({
  name: "app",
  initialState,
  reducers: {
    setMsg(state, action) {
      state.msg = action.payload;
    },
  },
});

// 工具会根据切片里的reducers自动生成与其同名的actionCreator
// actionCreator通过（同样自动生成的）type和reducer进行关联，来达到更新state的目的
export const { setMsg } = slice.actions;

// store
export default configureStore({
  reducer: slice.reducer,
});

结合react-redux

rudex的使用变得简单了，在组件中的使用却还是很麻烦，所以react-redux这个工具可以帮助我们更简单在组件中使用
首先在入口文件中注入全局状态

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}> <App /> </Provider>);

然后用它提供的两个hooks方法useSelector和useDispatch

const dispatch = useDispatch();
dispatch(setMsg('cat'));

const msg = useSelector((state) => state.msg)

一整个就简单起来了～绝绝子呀！！！！！