前言：
1、redux类似于vue的vuex，除了一些细节和使用方法，两者原理和使用场景没有多大的区别。
2、react-redux是为了让redux更好的在react上使用诞生的，主要就是provide、connect两个方法。
3、redux主要用于公共数据管理、公共方法管理、某个对象的状态管理。
基础用法及步骤：
1、安装相关包文件
npm i redux --save
npm i react-redux --save
2、创建actions.js文件，存放action
//此处action只是为了举例，是最简单的方式，在后面会记录更多方式创建
//此处的Test便是一个action生成函数，返回的是一个对象，具有type属性与其他附带的值
export const Name= (payload) => ({
type: 'NAME',
payload //此处为调用action生成函数时候传的参数
})
export const Rank = () =>({
type: 'RANK'
})
3、创建reducers.js文件，存放reducer
//引入combineReducers，用来组合多个reducer
import {combineReducers} from 'redux'
//tip 此处的函数形参必须要有默认值，否则会报错
function getName(state = '',action){
//此处的形参不是完整的state了，而是我们单独操作的那个状态值，也就是后面state对象中的name
//因为combineReducers的作用，它会生成一个state对象，包含每一个reducer处理后返回的值
switch(action.type){
case 'NAME':
state = action.payload
return state
default:
return state
}
}
function changeRank(state = 0,action){
switch(action.type){
case 'RANK':
state++
return state
default:
return state
}
}
const reducer = combineReducers({
name: getName,
rank: changeRank
})
export default reducer
4、创建store.js，生成store对象
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
5、在主入口js中引入相关store，这里已index.js为例
import React from 'react'
import ReactDOM from 'react-dom'
import App from './index' //组件app
import {Provider} from 'react-redux' //用来装载store，使store渗入各个组件
import store from './store' //创建的store的位置
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
6、在组件中使用redux
import { useSelector, useDispatch } from 'react-redux'
import {Name} from '../../redux/actions'
let Content = () => {
let name = useSelector(state => state.name)
let dispatch = useDispatch()
return(
<div>
redux 结合 hook
显示{name}
<div onClick={() => {dispatch({type:'NAME',preload:'my name'})}}></div>
</div>
)
}
export Content
