React 中 redux 的第一个例子

周大胖子

1. redux 正常使用
   
2.                
   
3.                         其实推荐了一个 chrome 拓展程序 [其中虽然store 被改变 ，但是 斌没有对其文件有任何操作]
   
4.                   
   
5.                         1. 通过 dispatch(action) 向 store 传递  一个action 的json 字符串
   
6.                         2. store 会在reducer 中  处理接收 这个action
   
7.                         3. redecer 处理完的newState 返回给 store
   
8.                         4. 模块订阅监听 store 的变化  并给出一个处理的 function
   
9.                         5. 在处理的 function 中 进行对该模块的操作 ，大部分是直接this.setState( store.getState() )

复制代码

上代码：
模块：

1. import React , { Fragment, Component }from 'react';
   
2. import Mitem from './Mitem';
   
3. // 第三步 引入 仓库
   
4. import store from '../store/Store';
   
5. 
   
6. class Mydo extends Component{
   
7. 
   
8.     // 构造函数
   
9.     constructor(props)
   
10.     {
    
11.         super(props);
    
12. 
    
13.         // 第四步 获取仓库的内容 利用 store.getState方法
    
14.         // console.log(  store.getState() );
    
15.         this.state =store.getState();
    
16.         console.log(this.state.inpValue)
    
17. 
    
18.         this.lmStoreChange = this.lmStoreChange.bind(this);
    
19.         // 此处加个监听订阅
    
20.         store.subscribe(this.lmStoreChange);
    
21.     }
    
22. 
    
23.     lmStoreChange(){
    
24.         console.log(store.getState());
    
25.         // 这里其实还缺少一个对list 的操作，但是我不想管
    
26.         this.setState(store.getState())
    
27.     }
    
28. 
    
29.     // 监听input改变
    
30.     inpC(e){
    
31.         // this.setState({
    
32.         //     inpValue:e.target.value
    
33.         // })
    
34.         // console.log(e.target.value)
    
35. 
    
36.         let action = {
    
37.             type :'chang_inp_value',
    
38.             value:e.target.value
    
39.         }
    
40.         // 传给数据处理中心中心 利用 dispatch 方法
    
41.         store.dispatch(action);
    
42.         
    
43.     }
    
44. ………………

复制代码

继续代码 reducer

1. // 这是一个处理器 用来 对 store  进行对应的操作；
   
2. //  这个defaulState 只是一个测试的值 其实只要返回下面的就可以
   
3. const defaultState ={
   
4.     t:[],
   
5.     lm:111,
   
6.     inpValue : '123',
   
7.     arr:[]
   
8. };
   
9.                
   
10. export default ( state=defaultState, action )=>{
    
11. 
    
12.     if(action.type == 'chang_inp_value')
    
13.     {
    
14.         // 这个步骤，视频里 说是拷贝，对json 的 解析 属于脱裤子放屁的 “深拷贝”
    
15.         let newState = JSON.parse(JSON.stringify(state));
    
16.         newState.inpValue = action.value;
    
17.         // 这里的return 其实是修改掉落 newState 的值  ，在模块中设定了监听函数 store.subscribe(this.lmStoreChange); 就可以实时进行更新
    
18.         return newState;
    
19.     }
    
20. 
    
21.     return state;
    
22. };

复制代码

周大胖子

store 是唯一的
store 只能自己改变自己的内容
Reducer 必须是一个纯函数[给固定的参数 就会给固定的输出，且不能有任何的副作用（副作用类似对相关参数进行的修改） ] ；也就是不能放日期，不能放ajax