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);
2. 如何获取到储存的状态以及如何修改状态?
通过引入useSelector
和useDispatch
一个用来获得状态 一个用来发送修改状态请求
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)