文章目录
一、Redux
前两章介绍了props和state,当时有说到,对于大量的组件需要共用同一条数据时,使用props传递是非常麻烦的事情,所以出现了Redux
Redux设计思想
-
Web 应用是一个状态机,视图与状态是一一对应的。
-
所有的状态,保存在一个对象里面。
Redux原则
- 唯一数据源
- 保持状态只读
- 数据改变只能通过纯函数完成
Redux API
1. store
用于保存数据,一个应用只有一个store
创建方法:
createStore(fn)
返回新生成的store
2. state
store对象包含所有的数据
const state = store.getState()
一个state对应一个view
3. Action
用户需要改变数据时,操作不到state,只能改变view,所以Action相当于一个消息,运数据到store,通知state变化
Action是一个对象类型,用于描述当前发生的事情,表现形式如下:
const action = {
type: 'ADD_TODO', //表示action的名称
payload: 'Learn Redux'//携带的字符串信息
};
Action creator 生成Action
View 要发送多少种消息,就会有多少种 Action。如果都手写,会很麻烦。可以定义一个函数来生成 Action,这个函数就叫 Action Creator。
const ADD_TODO = '添加 TODO';
function addTodo(text) { //Action creator
return {
type: ADD_TODO,
text
}
}
const action = addTodo('Learn Redux');
store.dispatch() view发出Action的唯一方法
store.dispatch() 接受一个Action对象作为参数,将它发送出去
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
结合 Action Creator,这段代码可以改写如下。
store.dispatch(addTodo('Learn Redux'));
4. Reducer
strore收到action时,需要对view作出变化,这时,就是需要给出一个新的state,就需要Reducer来作出计算。
Reducer是一个函数,接受两个参数;
- 当前state
- action
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
});
上面代码中,reducer函数收到名为ADD的 Action 以后,就返回一个新的 State,作为加法的计算结果。
实际应用中,Reducer 函数不用像上面这样手动调用,store.dispatch方法会触发 Reducer 的自动执行。为此,Store 需要知道 Reducer 函数,做法就是在生成 Store 的时候,将 Reducer 传入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
上面代码中,createStore接受 Reducer 作为参数,生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State。
工作流程
- 用户操作视图发出action,
- Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State 。
- state变化,store会调用监听函数,通过store.getState()得到当前状态,触发重新渲染view
二、react-redux
ui组件和容器组件
react-redux是redux的一个库,将所有组件分为两大类,ui组件和容器组件
- ui组件
- 负责ui的实现,不负责业务逻辑
- 咩有state,即状态
- 所有数据由props提供
- 不使用redux的api
- 容器组件
- 负责管理数据和业务逻辑
- 由state内部状态
- 使用redux的api
UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
conect
(1)connect代码结构
import hoistStatics from 'hoist-non-react-statics'
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) { // ...
return function wrapWithConnect(WrappedComponent) { // ...
class Connect extends Component { // ...
render() { // ...
if (withRef) {
this.renderedElement = createElement(WrappedComponent, {
...this.mergedProps, ref: 'wrappedInstance'
})
} else {
this.renderedElement = createElement(WrappedComponent, this.mergedProps
) }
return this.renderedElement }
}
// ...
return hoistStatcis(Connect, WrappedComponent);
} }
connect 函数本身返回名为 wrapWithConnect 的函数,而这个函数才是真正用来 装饰 React 组件的。而在我们装饰一个 React 组件时,其实就是把组件在 Connect 类的 render 方 法中进行渲染,并获取 connect 中传入的各种额外数据。
connect是用来连接ui组件和逻辑组件
connect需要两个参数
- mapStateToProps,输入逻辑,即建立state对象到props对象的映射关系
- mapDispatchToProps,输出逻辑,即建立ui组件的参数到store.dispatch方法的映射
输入逻辑:即外部数据(state对象)->ui组件的参数
输出逻辑:通过用户操作定义action对象,传给store
mapStateToProps
-
connect的第一个参数,定义了我们需要从 Redux 状态树中提取哪些部分当作 props 传给当前 组件
-
mapStateToProps执行后应该返回一个对象,里面的每一个键值对就是一个映射。当然也可以传入一个函数,原因是在 connect 的第一个参数里利用函数闭包进行一些复杂计 算的缓存,从而实现效率优化的目的。
-
mapStateToProps是一个函数,它接受state作为参数,返回一个对象。这个对象有一个todos属性,代表 UI 组件的同名参数,后面的getVisibleTodos也是一个函数,可以从state算出 todos 的值。
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会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。
mapDispatchToProps()
- mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射,它可以是一个函数,也可以是一个对象
- 它接受 store 的 dispatch 作为第一个参数,同时接受 this.props 作为可选的第 二个参数。
作为函数时
有两个参数dispatch和props
返回一个对象,该对象的每个键值对都是一个映射,定义了 UI 组件的参数怎样发出 Action。
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
作为对象时
通过定义一个方法,自动返回action
const mapDispatchToProps = {
onClick: (filter) => {
type: 'SET_VISIBILITY_FILTER',
filter: filter
};
}
provider
connect方法生成容器组件后,需要通过provider拿到state对象
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
上面代码中,Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了。
参考文章: https://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html