|
- Redux:[ 数据层框架 ——解决数据传递问题 ]
-
- 所有数据都放在一个 Store 中[一个公共数据存储数据空间]
- Redux = Reducer + Flux[官方推荐的框架 ,含有数据依赖的问题,所以过时了];
-
- Redux Flow [工作流程]
-
- React Compoents -> Action Creators -> Store -> Reducers
- 组件 -> 行动 -> 查阅 -> 取得数据
-
-
- Antd [一套UI矿建]
-
- npm install antd --save
-
- 官方网址: https://ant.design/docs/react/introduce-cn
-
-
-
-
- store 的仓库
-
- 1. 安装redux cnpm install redux
-
-
- 2. 创建store [数据仓库]
-
- // 第一步 利用 redux 中的 createStore 来创建 一个仓库
- import { createStore } from 'redux';
- import reducer from './Reducer';
- // 第二步 是引入 且 成功搞一个 仓库操作的类[可以看做图书管理员所使用的电脑软件]
- const store = createStore(reducer);
- export default store;
-
-
- 3. 创建数据处理模块 reducer 这个只是被引入, 不引入任何东西 但是要在 实例化store[也就是第二步]中使用
-
- // 这是一个处理器 用来 对 store 进行对应的操作;
- // 这个defaulState 只是一个测试的值 其实只要返回下面的就可以
- const defaultState ={
- t:[],
- lm:111
- };
-
- export default ( state=defaultState, action )=>{
- return state;
- };
-
-
- 4. 正常模块 去调用仓库中的数据
-
- // 第三步 引入 仓库
- import store from '../store/Store';
-
- // 构造函数
- constructor(props)
- {
- super(props);
- // this.state ={
- // inpValue : '123',
- // arr:[]
- // }
- // 第四步 获取仓库的内容 利用 store.getState方法
- console.log( store.getState() );
- this.state =store.getState();
- }
复制代码
|
|