Redux是React Native用来管理全局状态的一个工具。
React Native里面用到的是它的一个封装库,React Redux
为什么要使用Redux呢?当你的Rn项目越来越庞大的时候,需要机制来管理组件的状态的时候。
如何引入Redux?
npm install redux react-redux
怎么使用Redux呢?
Action 每次改变需要发送一个Action通知,可以通过
store的dispatch函数来发送通知。而发送的Action是一个对象,但是这个对象呢,一般会有个type变量,来表示
Store
Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
reducer 表示怎么处理发送到Action, actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state,而Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
React-Redux
React-Redux 是Redux的作者专门为了react-native对readux的封装。
整体流程如下:
首先你创建一个Action
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
调用 store.dispatch()
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
声明Reducer去处理
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}
};
const state = reducer(1, {
type: 'ADD',
payload: 2
});
一般的方式是通过 store.dispatch()来接收参数,也可以使用connect函数:
connect
store 里能直接通过 store.dispatch() 调用 dispatch() 方法,但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。
mapDispatchToProps 用来声明哪些Aciton是你用来接受的。mapStateToProps接受两个参数,第一个参数state表示接受到的 Redux store state。第二次参数是可选的参数,表示的表组件本身的props,如果传入了这个参数,表示自身组件的属性变化也会引发mapDispatchToProps函数。mapDispatchToProps必须返回一个object对象,返回的数据将成为这个组件的新属性。