Redux的使用

---

一、Redux是什么？

学过Vue的朋友应该晓得Vuex,就知道了这个东西,没有学过的朋友也不要慌,总结来说redux就是一个存储数据的仓库。如果你没有想到用它，或者你项目不用它也可以完成，那就不要用他了。

二、思想介绍

Redux 有三个核心

• Action 个人理解就是很多的资源(比如金银珠宝),换算成代码就是一个带type的对象，对象有名字,有数据。像一个装着金银珠宝的箱子,箱子上有变化或者名字

• 

• Reducer Reducer呢像一个佣人或者强盗,他负责搬运或者对这箱珠宝进行处理,

• Store Store这个就是最后的仓库了，他是没有灵魂的,就负责放数据(金银珠宝)

• 
  整体逻辑图
  

二、使用步骤

1.使用脚手架创建React的项目

    creact-react-app  my-xxx //创建命零

2.给项目加载redux

   yarn add redux  //创建命零

3.项目目录解构

4.实现原理

1. 创建页面组件

import React, { Component } from 'react';
//导入store
import store from  '../../store'
// 导入 action
import {sendAction} from '../../action'
class Home extends Component {
   componentDidMount(){
       //检测store发生改变时,触发
       store.subscribe(()=>{
           console.log("subscribe",store.getState());
           // 一旦发生变化，就渲染视图
           this.setState({})
       })
   }
   //点击后执行
   handleClick=()=>{
       // 将action 传递给reducer
       const action = sendAction()
       store.dispatch(action)
   }
   render() {
       return (
           <div>
               <button onClick={this.handleClick}>按钮</button>
               <div>{store.getState()}</div> {/* 获取仓库中的数据 */}
           </div>
       );
   }
}

export default Home;

2.action对象

 // 定义action 
const sendAction=()=>{
   return {
       type:'send-action',
       value:'redux中的数据'
   }
}
module.exports={
   sendAction
}

3. 自定义reducer对象

  // 自定义reducer
//默认值
const initValue = '默认值'
const myReducer = (state = initValue, action) => {
  switch (action.type) {
    case 'send-action': //根据箱子上的名字进行处理
      return action.value //取出箱子里的金银珠宝
    default://如果没有标签，默认就扔到杂物堆
      return state
  }
}
// 导出reducer
module.exports = {
  myReducer,
}

4.创建store对象

  // 导入redux,创建store
import { createStore } from "redux";
// 导入reducer 
import {myReducer} from '../reducer/'
// 佣人把金银珠宝放到仓库
const store =createStore(myReducer)

// 导出store
export default store

总结

提示：这里对文章进行总结：主要介绍了最最最基本的redux思路,三个对象一定要掌握理解,后面还有更难的哦,着急下班了,下次更新react-redux。2021/11/02 18:31