react中redux的使用

Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。类似于vuex

但Redux并不只为react应用提供状态管理， 它还支持其它的框架。

使用前,最好先建一个store文件夹,来管理Redux中的状态

 注意: redux可以无视组件层级,对于组件系统来说，redux就是一个第三方的，全局的变量

友情提醒! 一般项目中都是redux 和 react-redux 来搭配使用的,这两者是不同的包,

这里我们就直接来说说react-redux的使用流程

准备工作: 现在src目录下导入 store 和 Provider 然后使用<Provider></Provider>包裹住App

import React from "react";
import ReactDOM from "react-dom";
import "./styles/index.css";
import App from "./App";
import store from "./store";
import {Provider} from "react-redux";
ReactDOM.render(<Provider store={store}><App /></Provider> , document.getElementById("root"));

1. 这是一个store文件下的index.js  专门用来存储状态和修改状态

import { createStore } from "redux";
const initState = 0 //初始化状态
const reducers= (state = initState , action) => { //action就相当于{ type:'add',payload: 2 }
  switch (action.type) {
    case 'add':
      // 返回新的state
      return state + action.payload
    case 'addN':
      // 返回新的state
      return state + action.payload
    default:
      return state
  }
}
const store = createStore(reducers);
export default store;

2. 如何获取到储存的状态以及如何修改状态?

        通过引入 useDispatch 和 useSelector 一个用来获得状态 一个用来发送修改状态请求

dispatch 有两个参数,一个对应名称,一个对应传递的值,可以是一个数字也可以是一个对象

import React  from "react";
import { useDispatch, useSelector } from "react-redux";

export default function Channel() {
    const channels = useSelector((state) => state);//得到储存的状态
    const dispatch = useDispatch(); // dispatch修改状态的一个函数
    return (
        <ul className="catagtory">
           <li>{channels }</li> //使用状态
           <li><button onClick={ ()=>{ dispatch({ type:'Add',payload: 2 }) }}>点击+2</button></li>
        </ul>
    );
}

3. 三个核心概念

action -  reducer -  store

         对应的代码如下

定义reducer

initState = 0
function reducer(state = initState, action) {
  return state
}

----------------------------------------
定义action
const dispatch = useDispatch()
const action1 = { type:'addN', payload: 12 }
dispatch(action1)

获取状态
  const num = useSelector((state) => {
    return state
  })
----------------------------------------
定义store

import { createStore } from 'redux'
// 创建 store
const store = createStore(reducer)