react-redux 结合 react hook 之 基础篇

前言：

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