老莫的笔记本  
  
请选择 进入手机版 | 继续访问电脑版
查看: 725|回复: 0

React 初识 Reducx

[复制链接]

662

主题

878

帖子

5113

积分

超级版主

Rank: 8Rank: 8

积分
5113
发表于 2020-9-5 10:18:37 | 显示全部楼层 |阅读模式

  1.                 Redux:[ 数据层框架 ——解决数据传递问题 ]
  2.                        
  3.                         所有数据都放在一个 Store 中[一个公共数据存储数据空间]
  4.                         Redux = Reducer + Flux[官方推荐的框架 ,含有数据依赖的问题,所以过时了];

  5.                        
  6.                 Redux Flow [工作流程]
  7.                
  8.                         React Compoents -> Action Creators -> Store ->  Reducers
  9.                         组件 -> 行动 -> 查阅  -> 取得数据
  10.                                
  11.                
  12.                 Antd [一套UI矿建]
  13.                        
  14.                         npm install antd --save
  15.                        

  16.                 官方网址: https://ant.design/docs/react/introduce-cn
  17.                                
  18.                                
  19.                        
  20.                                
  21.                 store 的仓库
  22.                
  23.                 1. 安装redux   cnpm install redux
  24.                                
  25.                                
  26.                 2.  创建store [数据仓库]
  27.                        
  28.                                 // 第一步  利用 redux 中的 createStore 来创建 一个仓库
  29.                                 import { createStore } from 'redux';
  30.                                         import reducer from './Reducer';

  31.                                 // 第二步 是引入 且 成功搞一个 仓库操作的类[可以看做图书管理员所使用的电脑软件]
  32.                                 const store = createStore(reducer);


  33.                                 export default store;
  34.                                
  35.                                
  36.                 3.  创建数据处理模块 reducer  这个只是被引入, 不引入任何东西  但是要在 实例化store[也就是第二步]中使用
  37.                
  38.                         // 这是一个处理器 用来 对 store  进行对应的操作;
  39.                         //  这个defaulState 只是一个测试的值 其实只要返回下面的就可以
  40.                                 const defaultState ={
  41.                                         t:[],
  42.                                 lm:111
  43.                                 };
  44.                
  45.                                 export default ( state=defaultState, action )=>{
  46.                                         return state;
  47.                                 };
  48.                
  49.                
  50.                 4.  正常模块 去调用仓库中的数据
  51.                                        
  52.                         // 第三步 引入 仓库
  53.                         import store from '../store/Store';

  54.                                
  55.                          // 构造函数
  56.                         constructor(props)
  57.                         {
  58.                                 super(props);

  59.                                 // this.state ={
  60.                                 //     inpValue : '123',
  61.                                 //     arr:[]
  62.                                 // }


  63.                                 // 第四步 获取仓库的内容 利用 store.getState方法
  64.                                 console.log(  store.getState() );
  65.                                 this.state =store.getState();
  66.                         }       
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表