目录
一. React-Redux是什么
1. React-Redux的组件拆分规范
1.1 UI组件
1.2 容器组件
2. React-Redux的API
2.1
connect()方法2.2 Provider组件
二. 为什么要使用React-Redux
三. 怎么使用React-Redux
需要导入的组件：
reduxreact-reduxredux-thunk-
redux-devtools（可选）：Redux开发者工具，支持热加载、action重放、自定义UI等功能。 -
redux-persist（可选）：支持store本地持久化。 -
redux-observable（可选）：实现可取消的action。
yarn add redux
yarn add react-redux
yarn add redux-thunk
一. React-Redux是什么
React-Redux，是Redux的作者为了辅助我们使用Redux而编写的一个库，没有提供什么新功能。
通常情况下，我们写的一个组件内部既负责UI渲染，也负责管理数据和处理业务逻辑。而React-Redux秉承一个理念，就是要把一个组件拆分成UI组件和容器组件，UI组件只负责UI的渲染，容器组件只负责管理数据和处理业务逻辑，而容器组件的这些逻辑又完全是交给Redux来处理的，所以就可以使得我们编写的组件完全成了一个UI组件，组件内部会更加清爽。
1. React-Redux的组件拆分规范
使用React-Redux时要对组件进行拆分，React-Redux规定所有的UI组件都由用户提供，容器组件则是由React-Redux自动生成，生成后我们直接容器组件，而不再使用UI组件。容器组件其实是包在UI组件外面的，所以它即具备渲染能力，也具备数据管理和业务处理的能力，只不过我们看不到而已，我们只能看到我们编写的UI组件，那些东西都在容器组件内部。
1.1 UI组件
UI 组件有如下特征。
- 只负责UI的呈现，不带有任何业务逻辑。
- 所有的数据都由
this.props属性提供。 - 内部没有状态，即不使用
this.state这个属性。 - 不使用任何Redux的API。
下面就是一个UI组件的例子。
class CustomNavigator extends Component {
render() {
return(
<View>
<Text>{this.props.headerTitle}<Text/>
<View/>
);
}
}
因为不含有状态，所以UI组件又称为“纯组件”，即它纯函数一样，纯粹由参数决定它的值。
1.2 容器组件
容器组件的特征恰恰相反。
- 负责处理业务逻辑，不负责UI的呈现。
- 有负责管理数据。
- 内部带有状态。
- 使用Redux的API。
2. React-Redux的API
2.1 connect()方法
React-Redux提供了connect()方法，用来生成一个UI组件对应的容器组件，即把组件和应用State建立映射关系。如果我们想让一个组件响应应用State的变化（即想让该组件的state由Redux来关系），就把搞成一个容器组件使用就可以了。
import {connect} from 'react-redux'
const VisibleTodoList = connect()(TodoList);
上面代码中，TodoList是UI组件，VisibleTodoList就是由React-Redux通过connect()方法生成的容器组件。
但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是UI组件的一个单纯的包装层，实际开发中我们需要为每个容器组件定义两种业务逻辑，即：
- 输入逻辑：UI组件的输入逻辑类
props要和应用的state建立映射关系。 - 输出逻辑：UI组件的输出逻辑类属性要和dispatch(addAction)建立映射关系。
因此，使用connect()方法从UI组件生成容器组件的完整API如下。
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList);
上面代码中，connect()方法接收了两个参数，其中mapStateToProps就负责输入逻辑的映射，mapDispatchToProps就负责输出逻辑的映射。
（1）mapStateToProps函数
mapStateToProps是一个函数，它用来建立UI组件的输入逻辑类props和应用state的映射关系，以此决定改组件想要使用应用state里的哪一部分数据。它可以得到应用的state一个参数。
该函数执行后立即返回一个JS对象，该JS对象里的每一个key都是该UI组件的某个props（必须同名），而每一个key对应的value则来自于应用state里数据的计算。这样就建立起了映射关系，请看下面的例子。
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed);
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed);
default:
throw new Error('Unknown filter: ' + filter);
}
}
上面代码中，mapStateToProps函数接受应用的state作为参数，返回一个JS对象。这个JS对象有一个todos属性，是UI组件的同名参数，后面的getVisibleTodos也是一个函数，用来从state算出todos的值。
请注意：
mapStateToProps函数就像我们上一篇所说到的store.subscribe(callback)的那个回调函数一样，它会监听应用State的变化，所以每当state更新的时候，它就会自动执行，重新赋值UI组件的props，从而触发UI组件的重新渲染。
（2）mapDispatchToProps函数
mapDispatchToProps是connect()函数的第二个参数，它用来建立UI组件的输出逻辑类props和应用dispatch(addAction)的映射关系。它可以得到dispatch和ownProps（容器组件的props对象）两个参数。
该函数执行后立即返回一个JS对象，该JS对象里的每一个key都是该UI组件的某个事件类props（必须同名，onPress、onClick等），而每一个key对应的value就是我们要做的dispatch(addAction)。这样就建立起了映射关系，请看下面的例子。
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
2.2 Provider组件
我们使用connect()方法生成容器组件以后，容器组件它自己也没有应用State啊，那它怎么完成应用State和UI组件的映射呢？所以我们还需要做一步，就是让让容器组件拿到应用State。
React-Redux提供Provider组件，可以让容器组件拿到应用State。做法很简单，只需要在应用根组件外面包一层Provider组件，那App的所有子组件就都默认拿到应用State了，所以容器组件作为根容器的子组件，自然也就拿到了。
import {Provider} from 'react-redux';
export default class App extends Component<Props> {
render() {
return (
<Provider store={store}>
<TestPage/>
</Provider>
);
}
}
二. 为什么要使用React-Redux
首先说明，React-Redux也不是必须使用的，它只是Redux的一个辅助库，可以帮助我们使得组件的内部更简洁。
因为React-Redux秉承一个理念，就是要把一个组件拆分成UI组件和容器组件，UI组件只负责UI的渲染，容器组件只负责管理数据和处理业务逻辑，而容器组件的这些逻辑又完全是交给Redux来处理的，所以就可以使得我们编写的组件完全成了一个UI组件，组件内部会更加清爽。
三. 怎么使用React-Redux
我们依旧以一个最简单的计数器为例。
- 导入相关的东西
-----------TestPage.js-----------
// 导入Redux相关的东西
import {createStore, combineReducers} from 'redux';
// 导入React-Redux相关的东西
import {connect, Provider} from 'react-redux';
- 先做Redux部分
三个关键词：store、reducer、action。
-----------TestPage.js-----------
// 第2步：
// 创建根reducer，合并所有子reducer
// 请注意，这个根reducer是个极其重要的东西，因为正是它合并子reducer的过程，决定了应用state里到底存放着什么东西，即什么组件的state要被放在它里面
// 什么组件的state想要交由应用的state来统一管理，我们就为该组件编写一个对应的子reducer来描述它state具体变化的过程并返回一个state，然后把这个reducer作为value存放在应用state里（即合并子reducer的时候）
// 刚创建根reducer时，我们可能不知道将来会有那些组件的state会被放在应用state里来统一管理，所以可以先空着，什么时候需要什么时候往这里添加就可以
// 这里我们假设计数器的state想要交由应用的state统一管理，计数器可以改变数字和背景色
// 所以我们编写一个计数器子reducer，专门用来完成计数器state的变化，并返回新的state
// 计数器的初始state
const defaultState = {
number: 100,
backgroundColor: 'pink',
}
// 计数器的state具体变化的过程
const counterReducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD_NUMBER':
return {
...state,
number: state.number + 1,
};
case 'CHANGE_BACKGROUND_COLOR':
return {
...state,
backgroundColor: action.backgroundColor,
};
default:
return state;
}
}
// 接下来第3步，就是结合该组件reducer里action.type的规定，为该组件创建对应的action，预备好action，到时候组件一被触摸就dispatch一个action
const rootReducer = combineReducers({// 这个对象就是应用的state
// 应用state里的属性名当然可以随便起，但是为了好理解，我们就起做xxxState，为什么这么起呢？
// 因为应用state的定义就是，它里面存放着项目中所有想被统一管理state的组件的state，所以我们起做xxxState，将来使用时很方便理解，比如state.counterState，就代表从应用state里取出counterState
// 而且它的值就是对应的该组件的那个子reducer嘛，而reducer函数又总是返回一个state，这样xxxState = 某个state值，也很好理解
counterState: counterReducer,
});
// 第1步：
// 创建项目唯一的store，发现需要一个reducer
const store = createStore(rootReducer);
// 所以接下来第2步，我们去创建一个reducer，回过头来填在这里
// 第3步：
// 为该组件创建对应的action，预备好action，到时候组件一被触摸就dispatch一个action
// 负责描述state要做什么变化以及变化所需的原料，用来dispatch
const addNumberAction = {type: 'ADD_NUMBER'};
// Action Creator
function changeBackgroundColor(backgroundColor) {
// 返回一个action
return {
type: 'CHANGE_BACKGROUND_COLOR',
backgroundColor,
}
}
// 好，完成了这三步，Redux部分就算完成了，我们可以开始React-Redux的部分
- 再做React-Redux部分
四个关键词：UI组件、容器组件、connect方法、Provider组件。
-----------TestPage.js-----------
// 第1步：编写UI组件
// 仅负责UI的渲染工作，所需数据只能通过props获得
// 不能处理业务逻辑，不能使用Redux的API
class Counter extends Component {
render() {
// 该UI组件有三个属性，下面添加映射关系的时候会为该组件添加上这些属性
// number：输入逻辑类属性
// backgroundColor：输入逻辑类属性
// addNumber：输出逻辑类属性
// changeBackgroundColor：输出逻辑类属性
const {number, backgroundColor, addNumber, changeBackgroundColor} = this.props;
return (
<View style={[styles.counterViewStyle, {backgroundColor: backgroundColor}]}>
<Button
title={'变色'}
// 第5步：在需要发出action的地方，通过调用props里方法的形式发出一个action就可以了
// 注意，onPress必须接收一个函数，而不能接收一个函数的调用
// 所以这里不能写成：onPress={changeBackgroundColor('cyan')}
// 而应该给它赋值一个函数：
onPress={() => changeBackgroundColor('cyan')}
/>
<Text style={{fontSize: 24}}>{number}</Text>
<View>
<Text
style={{color: 'black', fontSize: 20}}
// 注意，onPress必须接收一个函数，而不能接收一个函数的调用
// 因为addNumber函数不需要参数，所以可以直接赋值
onPress={addNumber}
>{'+'}</Text>
</View>
</View>
);
};
}
// 第2步：建立UI组件的props与外界的映射关系
// 你可能会问“这个UI组件是什么添加上这些props的呢”？没错，正是这个添加映射关系的过程为该UI组件添加上了这些props
// 输入逻辑类属性要和应用state里该组件state里的属性建立映射关系
function mapStateToProps(state) {
return {
// UI组件的属性：应用state.该组件的state.属性
// 注意这里要保证，该组件props里的属性，和该组件state里（这里只是姑且这么称呼，其实counterState并非真正该组件的state）的属性同名
number: state.counterState.number,
backgroundColor: state.counterState.backgroundColor,
}
}
// 输出逻辑类属性要和dispatch(action)建立映射关系
function mapDispatchToProps(dispatch) {
return {
// UI组件的属性：dispatch(action)
addNumber: () => dispatch(addNumberAction),
changeBackgroundColor: (color) => dispatch(changeBackgroundColor(color)),
}
}
// 第3步：使用connect方法生成UI组件对应的容器组件
// 将来我们就是使用UI组件的容器组件了，而不是使用UI组件
const CounterContainer = connect(
mapStateToProps,
mapDispatchToProps,
)(Counter);
export default class TestPage extends Component {
render() {
return (
// 第4步：在整个项目的根组件外面包一层Provider组件（注意，这一步只针对整个项目的根组件，小组件不需要这一步，完成第3步之后直接使用就可以了），记得一定要把store={store}传递进去
<Provider store={store}>
<View style={styles.container}>
<CounterContainer/>
</View>
</Provider>
);
}
}
- 样式部分
-----------TestPage.js-----------
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
counterViewStyle: {
width: 200,
height: 60,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
},
});
参考博客：
阮一峰：Redux入门教程——React-Redux 的用法
