logo头像
Snippet 博客主题

redux基础

本文于1530天之前发表,文中内容可能已经过时。

基本概念和API

1 . store: 保存数据的地方,可以把它当作一个容器,整个应用只能有一个store,Redux提供了createStore函数来生成store。

1
2
import { createStore } from 'redux';
const store = createStore(fn);

2 . state: store对象包含了所有数据,如果想要得到某个时点的数据,就要对store生成快照。这个时点的数据集合就叫做 state,当前时刻的state可以通过store.getState()拿到。

1
2
const state = store.getState();
//Redux规定:1个state对应一个view,只要state相同,view就相同,你知道了state就相当于知道了view是怎么样的了

3 . Action: 会导致view的变化,但是用户接触不到state,只能接触到view,所以state的变化必须是view导致的。action就是view发出通知,表示state应该发生变化了。Action是一个对象。其中的type属性是必须的,表示Action的名称,其他属性可以自由设置,比如

1
2
3
4
const action = {
type: 'ADD_TODO',
playload: 'Learn Redux'
}

4 . Action Creator: View层有多少种消息,就会有多少种Action,可以用一个函数来生成Action,这个函数就是Action Creator

1
2
3
4
5
6
7
8
9
const ADD_TODO = '添加 TODO';
function addTodo(text){
return {
type: ADD_TODO,
text
}
}
const action = addTodo("learn Redux");

5 . store.dispatch: 是view发出Action的唯一方法。中间件就是在这个阶段使用

1
2
3
4
5
6
impot { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: "ADD_TODO",
payload: "learn Redux"
})

6 . reducer: store接受到Action以后,必须给出一个新的state,这样view才能发生变化,这种state的计算过程就叫做Reducer,它是一个纯函数,接受Action和当前state作为参数,返回一个新的state

1
2
3
const renucer = function(state,action){
return new_state;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//案例
const defaultState = 0;
const reducer = (state = defaultState,action) => {
switch (action.type){
case: 'ADD'
return state + action.payload;
default:
return state;
}
}
const state = redicer(1,{
type: 'ADD',
payload: 2
})

7 . store.subscript(callback) 这个方法用于设置监听函数,一旦state发生变化,就会自动执行这个函数,只要是view的更新函数(react项目就是render或者setState方法放入listen),就能实现view层的 自动渲染。

1
2
3
let unsubscript = store.subscribe(() =>
console.log(store.getState());
)

unsubscript();

8 . mapStateToProps:这个方法就是把接受到的state转换为props,一般只用第一个参数state

1
2
3
4
5
const mapStateToProps = (state) => {
return {
value: state.xx
}
}

9 . mapDispatchToProps:这个是把接受到的动作转换为props

1
2
3
4
5
6
7
8
const mapDispatchToProps = (dispatch) => {
return {
onReast: () => {
//一堆自己要写的逻辑
dispatch(action)
}
}
}

store的方法

1
2
3
store.getState();
store.dispatch();
store.subscribe();

redux提供了combineReducers方法,用于reducer的拆分。

坑点:

1.如果用combineReducers的时候一定要注意要同步修改reducer里面的switch里面的内容,要不然会造成访问不到。

2.自定义mapDispatchToProps的时候注意return的时候一定要带回dispatch,要不然this.props里面就找不到dispatch了

1
2
3
4
5
6
7
8
9
const mapDispatchToProps=(dispatch)=>{
return {
onAdd:()=>{
console.log("1");
dispatch(action);
},
dispatch
}
}

完整的案例:

https://github.com/mcfly001/my-redux/tree/master