react中redux的原理理解以及基本使用

r囧r小猫 2022-09-10 12:16 162阅读 0赞

redux的使用：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2V5Lq677-9_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
**1、我们来讲解以下这个redux的原理图：**

React Components  =======》 吃饭的顾客
    Action Creators =======》 服务员
    Store =======》 饭店的老板（重中之重）
    Reducers =======》 后厨

（1）、顾客到饭店里面，开始对着服务员说了很多废话（今天心情很好，天气很好等），最后才说了一句，要一份回锅肉套饭；  
（2）、服务员直到最后才把顾客讲的话总结=》（要一份回锅肉套饭）do What，然后服务员把总结好的点餐信息汇总给老板下单；  
（3）、老板接收到下单信息之后，就把下单的详细信息传递给后厨，让他根据顾客的下单信息来出菜；  
（4）、后厨根据下单信息来出菜，并且判断这位顾客之前是否下过单，如果下过单，就把两次的下单信息合并，做好菜并把菜传递给老板；  
（5）、老板就叫顾客来取餐；

**2、我们来开始redux之旅**

（1）、首先我们应该创建一个为组件服务的reducer，reducer的本质就是一个函数；该函数接受到两个参数，分别为之前的状态（preState）与操作（action）;

//抛出reducer对象
    export default function countReducer(preState = 0,action){ 
    	//当没有传入preState时，就是当第一次初始状态时，preState的值为0
    	// 解构赋值从action对象中获取type，data
    	const { type,data} = action;
    	switch (type) { 
    		case 'increment':
    			return preState + data;
    		case 'decrement':
    			return preState - data;
    		default:
    		//当初始化操作时，直接返回preState = 0
    			return preState;
    	}
    }

（2）、创建store对象并抛出

// 引入createStore,专门用于创建redux中最为核心的store对象
    import {  createStore } from "redux";
    // 引入为count服务的reducer
    import countReducer from './count_reducer';
    //暴露store
    export default createStore(countReducer)

(3)、为react组件生成action对象，也就是创建action creator

/* 该文件专门为count组件生成action对象 */
    export const createIncrementAction = data=>({ type:'increment',data});
    export const createDecrementAction = data=>({ type:'decrement',data});

(4)、在react组件中使用redux

//获取reducer返回的状态
    store.getState()

//使用store的dispatch方法，并且使用生成action的方法
    store.dispatch(createIncrementAction(value*1))

// 在index.js中添加该段代码
    //可以监听只要store中的值发生变化，就会更新视图
    store.subscribe(()=>{ 
    	ReactDOM.render(<App></App>,document.getElementById('root'))
    })

综上，redux的基本使用就差不多啦。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2V5Lq677-9_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/f26d2b5fe3d04b10a2f1afd2e9298a27.png