Redux基础

发表于 | 分类于 |

Redux 基础

redux 是什么

  • 专注于状态管理，和react解耦
  • 单一状态，单向数据流
  • 核心概念：store、state、action、reducer

独立团项目：

独立团逐渐发展，老李发现管不过来了

  • 人少的时候，无论是兵器和人员的变更，都是setState
  • 发展为千人大团后，老李决定，军事生活分开
  • 所有的状态归赵政委（redux）管理，自己只打仗（view）显示

老赵（redux）主要功能：

  • 老赵有一个保险箱（store），所有人的状态，在那里都有记录（state）
  • 需要改变的时候，要告诉专员（dispatch）要干什么（action）
  • 处理变化的人（reducer）拿到state和action，生成新的state

老赵（redux）的使用方法

  • 首先通过reducer新建store，随时随地通过store.getState获取状态
  • 需要状态变更，store.dispatch（action）来修改状态
  • reducer函数接受state和action，返回新的state，可以用store.subscribe监听每次修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createStore } from 'redux';

//1.新建store，通过reducer建立
//根据老的state和action，生成新的state，state默认为0
function counter(state=0,action){
	switch (action.type) {
		case '加机关枪':
			return state+1
		case '减机关枪':
			return state-1
		default:
			return 10;
	}
}

//1.新建store
const store = createStore(counter);

//获取状态
const init = store.getState();
console.log(init);//10

完整的redux实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { createStore } from 'redux';

//1.新建store，通过reducer建立
//根据老的state和action，生成新的state，state默认为0
function counter(state=0,action){
	switch (action.type) {
		case '加机关枪':
			return state+1
		case '减机关枪':
			return state-1
		default:
			return 10;
	}
}

//1.新建store
const store = createStore(counter);

//获取状态
const init = store.getState();
console.log(init);//10

//监听
function listener(){
	const current = store.getState()
	console.log(`现在有机关枪${current}把`)
}

store.subscribe(listener);	

//派发事件，传递action
store.dispatch({type:'加机关枪'});
store.dispatch({type:'加机关枪'});
store.dispatch({type:'减机关枪'});

老赵（redux）怎么管理独立团

  • 把store.dispatch方法传递给组件，内部可以调用修改状态
  • subscribe订阅render函数，每次修改都重新渲染

  • redux相关内容，移到单独的文件index.redux.js（action和reducer）单独管理

  • index.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import ReactDom from 'react-dom';
import {createStore} from 'redux';
import App from './App'
import {counter} from './index.redux'

//建立store
const store = createStore(counter);

function render(){
	ReactDom.render(<App store={store} />,document.getElementById('root')) 
}
render();

store.subscribe(render);
  • index.redux.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//action和reducer
const ADD_GUN = '加机关枪';
const REMOVE_GUN = '减机关枪';

//reducer
export function counter(state=0,action){
	switch (action.type) {
		case ADD_GUN:
			return state+1
		case REMOVE_GUN:
			return state-1
		default:
			return 10;
	}
}

//action creator
export function addGUN(){
	return {type:ADD_GUN}
}

export function removeGUN(){
	return {type:REMOVE_GUN}
}
  • App.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import {addGUN} from './index.redux'

class App extends React.Component{
	render(){
		const store = this.props.store;
		const num = store.getState()
		return (
				<div>
					<h1>现在有机枪{num}把</h1>
					<button onClick={()=>store.dispatch(addGUN())}>申请武器</button>
				</div>
			)
	}
}

export default App;

更进一步

处理异步、调试工具、更优雅的和react结合

  • redux处理异步，需要redux-thunk插件

redux默认只处理同步，异步任务需要redux-thunk中间件。npm install redux-thunk --save

使用applyMiddleware开启thunk中间件（在index页面开启）；

1
2
3
4
import {applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

const store = createStore(counter,applyMiddleware(thunk));

action可以返回函数，使用dispatch提交action

  • npm install redux-devtools-extension并且开启
  • 使用react-redux优雅的连接react和redux
------ 本文结束 ------
0%