2.3.0.redux的简单案例

0.前提：

redux的作用是实现对复杂庞大数据的管理。

需要npm安装react-redux：（安装的是react-redux@6.0.0）

npm install redux react-redux@6.0.0 redux-devtools --save-dev

（因为我安装时的react-redux需要依赖react-redux@6.0.0版本以前的，所以react-redux就改成了6.0.0版本的）

在项目文件夹下面，创建一个demo.js，代码如下：

const ReactRedux = require('react-redux');
const Redux = require('redux');

console.log("ReactRedux:", ReactRedux);
console.log("Redux:", Redux);

可以查看redux、react-redux的相关对象了。

1.简单的demo：

代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

const reducer = (state, action) => {
	console.log('state:', state, 'action:', action);
	return action.hello;
}
const store = createStore(reducer);

store.dispatch({
		type: 'name',
		hello: {
			name: 'world'
		}
	});

ReactDOM.render(
	<h1>hello, {store.getState().name}</h1>,
	document.body
);
store.dispatch({
		type: 'name',
		name: 'world'
	});

结果：

2.代码简单的解释：

导入的是redux而不是react-redux，redux相关的代码只负责对数据的管理，而不涉及组件的变化。

这里的使用redux相关的store，然后是与之相关的state、action、reducer概念。

• 首先，调用redux中的createStore方法创建一个store对象，需要传入一个函数变量，函数变量被称为reducer。

reducer：数据类型是函数。规定好了参数和返回值，参数是state和当前的action，通过内部的代码操作，返回的值会是新的state。

state：可以是任意的数据类型。个人认为，可以看作是在store内部，对外开放的一个接口，代表数据的集合。只有通过触发reducer函数才能改变。

action：数据类型是对象。个人认为，可以看作是，对state需要如何变化的一种描述（只有复杂，需要区分对state需要执行什么操作时，才需要action对象），根据这种描述，reducer内部的代码返回不同的、新的state。

• 使用store.dispatch，传入action对象，触发reducer函数，返回新的state变量，改变store内部的state值（store在创建的时传入的reducer函数，规定了对state的操作，同时也会不传入参数地执行一次reducer）。
• 设置好了store对象内部的state之后，通过store.getState()取出state，传给外部的代码，进行操作。

 

3.store的相关方法：

可以看一下store有哪些方法，代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

const reducer = (state, action) => {
	return action.hello;
}
const store = createStore(reducer);
console.log("store:", store);

结果：

再取官方API上对照看一下，可以了解以下函数的作用：

• dispatch：传入action，触发reducer。
• getState：获取当前的state。
• replaceReducer：传入新的函数变量成为reducer，将之前的reducer注销。
• subscribe：注册一个，当state改变时，会触发的监听器。

相关代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

const reducer = (state, action) => {
	console.log('reducer1' ,'state:', state, 'action:', action);
	return action.hello;
}
const store = createStore(reducer);

store.replaceReducer((state, action) => {
	console.log('reducer2' ,'state:', state, 'action:', action);
	return action.name;
});
store.dispatch({
		type: 'name',
		name: 'world'
	});
store.subscribe(() =>{
	render();
});
const render = () => {
	ReactDOM.render(
		<h1 onClick={()=>{
			let name = prompt('你要改什么名字啊?');
			console.log("prompt name:",name)
			store.dispatch({
				type: 'name',
				name: name,
			});
		}}>hello, {store.getState()}</h1>,
		document.body
	);
}

render();

可以看出，原本的reducer 是将传入的action.hello作为新的state。使用store.replaceReducer之后，是将传入的action.name作为新的state。而渲染的函数中，也是传入带name属性的对象而不是hello。

store.subscribe传入的函数，封装了渲染函数render。

结果演示：

一个redux的简单案例到此结束。