Redux 初使用

Redux是什么?

Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Redux就是降低管理难度的。(Redux支持React,Angular、jQuery甚至纯JavaScript)

看下图理解一下
在这里插入图片描述

再看下官方的图
在这里插入图片描述

React Components就是我们操控的,我们先见到的是Action Creators请求 然后去Store里查看 用到Reducer去搜索然后拿来使用

为什么使用:

  • 组件需要根据状态发生显示变化
  • state并不总是以单向的方式线性流动
  • 存在组件需要更新全局状态
  • 存在组件需要更新另一个组件的状态
  • 存在状态以许多不同的方式更新
  • 状态树结构复杂
  • 某个状态需要在全局使用或共享(例如角色权限等信息)

好了现在开始说怎么使用

写之前 先安装一下redux

npm install --save redux

1. 编写创建store仓库

在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件。
index.js就是整个项目的store文件,打开文件,编写下面的代码。

	import { createStore } from 'redux'  // 引入createStore方法
	const store = createStore()          // 创建数据存储仓库  
	export default store                 //暴露出去

这样就建立好了仓库,但是现在乱,这时候就需要Reducers。这两个一定要一起创建出来,这样仓库才不会出现互怼现象。在store文件夹下,新建一个文件reducer.js,然后写入下面的代码。

	const defaultState = {}  //默认数据 后面可以根据自己的需求添加数据
	export default (state = defaultState,action)=>{  //就是一个方法函数
	    return state
	}

state: 是整个项目中需要管理的数据信息,这里我们没有什么数据,先用空对象来表示。
这reducer就建立好了,把reducer引入到store中,再创建store时,以参数的形式传递给store。

在store下的index里 加入Reducers.js

	import reducer from './reducer'    
	const store = createStore(reducer) // 把reducer 放到数据存储仓库

2. 在store中为todoList初始化数据

仓库store和reducer都创建好了,可以初始化一下我们组件中的数据了,在reducer.js文件的defaultState对象中,加入自己想要的数据

	const defaultState = {       //根据自己的需要添加
	    inputValue : 'XXXXXXXX',
	    State_list:[
		        '1 redux的好处',
		        '2 怎么使用redux'
		    ]
	}
	export default (state = defaultState,action)=>{
	    return state
	}

3. 组件获得store中的数据

有了store仓库,也有了数据,那如何获得stroe中的数据那?你可以在要使用的组件中,先引入store。
我们组件要使用store,就在src/(你的组件).js文件夹中,进行引入。

	import store from './store/index.js'    //可以直接简写'./store'

	然后在组件中获取用到constructor
	constructor(props){
	    super(props)
	    console.log(store.getState())   //获取数据  我们在控制台中可以看到
	    this.state=store.getState();  	//记得放到state里面
	}

拿到数据了 就可以渲染我们的页面了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章