react + Redux写的小demo（一）

Redux是解决数据传递问题的一个框架，它把所有的数据都放在store里进行管理。

npm install redux

在这里插入图片描述
src/store/index.js（管理员）

import { createStore } from 'redux';
import reducer from './reducer';//引入小手册，并把这个笔记本小手册传给createStore
const store = createStore(reducer);
export default store;

调用createStore方法就可以创建一个store，一个公共数据存储仓库；

src/store/reducer.js(小手册)
在redux中需要reducer返回一个函数，它的参数state对应图书馆里所有书，对应redux里就是整个仓库存储的数据，接着把这个小手册传给store

const defaultState = {
	inputValue:'',
	list:[]
};
export default （state = defaultState ,action）=> {

}

到这儿，我们就创建了一个reducer，它负责存储整个项目应用的数据，然后把reducer传给store，这样创建的store就会知道整个仓库数据都有哪些，就可以去reducer里查看。

接着组件就可以连接store去store里取数据显示在页面上，从公用的仓库里取数据首先就要引入store。

import store from './store';

通过 store.getState()获取store存放的公共数据。

	//一个类里面一定会有constructor构造函数,在React组件中constructor构造函数是优于其它任何函数会自动最先执行的函数
	constructor(props){
		super(props);//TodoList类继承了React的Component类
		//React里面定义数据是定义在state里面的
		this.state = store.getState();
		this.handleInputChange = this.handleInputChange.bind(this);
		this.handleStoreChange = this.handleStoreChange.bind(this);
		this.handleBtnClick = this.handleBtnClick.bind(this);
		this.handleItemDelete = this.handleItemDelete.bind(this);
		store.subscribe(this.handleStoreChange);
	}

总结：
创建store的时候要引入redux里的createStore方法，但不能仅仅创建store，需要在创建store的时候把reducer传给创建store的那个函数，也就是在创建一个管理员的时候要把那个小手册给管理员，其次，reducer返回的是一个函数，到底store里存储的哪些数据，是在 state = defaultState这里设置了仓库的默认数据。

redux调试插件需要加下面代码
在这里插入图片描述
接下来改变数据，假设我是借书的人，我要说一句话我要借数据结构这本书，这句话就是action creator帮我们创建的，
首先我们要创建一句话，也就是创建一个action。这句话要符合redux规范，它是一个对象的形式，type是你要描述的事情，是你跟store（管理员）说的话，value是你要传过去的新值。

const action = {
	type:'change_input_value',
	value:e.target.value
}
store.dispatch(action) //调用store.dispatch方法就可以把这句话传给store

现在组件已经创建了一句话，接下来要把这句话传给store，store提供了一个方法，我们调用store.dispatch方法就可以把这句话传给store。可是store这个管理员不知道该怎么处理这些事情，他需要去查小手册，他会拿着当前store里的数据以及接收到的action一起转发给reducer去查小手册，reducer来告诉store要做什么。reducer就可以接收传过来的state（此时是上一次存储的数据）和action（用户传过来的那句话），然后reducer会根据之前的state以及action来处理数据，并把新的state返回给store。store接收到新的数据之后就会用新的state数据替换掉老的state数据。然后在组件里通过订阅store.subscribe()来监听改变组件里的state数据。store.getState()重新取store最新的数据。
在这里插入图片描述

注意：reducer不能直接修改state里的数据，需要拷贝它的一个副本对它的副本修改完之后返回修改后的副本。reducer可以接收state但绝不能修改state。

总结：你要改变store里的数据先要派发一个action，action会通过dispatch方法传递给store，store再把之前的数据和action转发给reducer，reducer是一个函数，它接收到state和action之后会处理state的副本，并把修改完的state副本返回出去给store，store用这个新的state替换掉之前老的state，store数据发生改变后，react组件会感知到store发生改变，这个时候组件从store里面重新取数据更新组件的内容，页面就跟着发生变化了。
在这里插入图片描述

react + Redux写的小demo（一）

猜你喜欢