Code
npm install --save redux
1. redux理解
2. redux相关API
3. redux核心概念(3个)
4. redux工作流程
5. 使用redux及相关库编码
什么?: redux是专门做状态管理的独立第3方库, 不是react插件
作用?: 对应用中状态进行集中式的管理(写/读)
开发: 与react-redux, redux-thunk等插件配合使用
redux中包含: createStore(), applyMiddleware(), combineReducers()
store对象: getState(), dispatch(), subscribe() react-redux: <Provider>, connect()()
javascript
import {createStore} from 'redux'
import counter from './reducers/counter'
const store = createStore(counter)
state
`reducer`javascript
getState()
dispatch(action)
subscribe(listener)
javascript
store.getState()
store.dispatch({type:'INCREMENT', number})
store.subscribe(render)
应用上基于redux的中间件(插件库)
javascript
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk' // redux异步中间件
const store = createStore(
counter,
applyMiddleware(thunk) // 应用上异步中间件
)
合并多个reducer函数
javascript
export default combineReducers({
user,
chatUser,
chat
})
action:
默认是对象(同步action), {type: 'xxx', data: value}, 需要通过对应的actionCreator产生,
它的值也可以是函数(异步action), 需要引入redux-thunk才可以
reducer
根据老的state和指定的action, 返回一个新的state
不能修改老的state
store
redux最核心的管理对象
内部管理着: state和reducer
提供方法: getState(), dispatch(action), subscribe(listener)
Code
a.type: 标识属性, 值为字符串, 唯一, 必要属性
b.xxx: 数据属性, 值类型任意, 可选属性
javascript
const action = {
type: 'INCREMENT',
data: 2
}
const increment = (number) => ({type: 'INCREMENT', data: number})
javascript
export default function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + action.data
case 'DECREMENT':
return state - action.data
default:
return state
}
}
Code
a.返回一个新的状态
b.不要修改原来的状态
javascript
import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
javascript
getState(): 得到state
dispatch(action): 分发action, 触发reducer调用, 产生新的state
subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
需要引入的库:
redux
react-redux
redux-thunk
redux-devtools-extension(这个只在开发时需要)
redux文件夹:
action-types.js
actions.js
reducers.js
store.js
组件分2类:
ui组件(components): 不使用redux相关PAI
容器组件(containers): 使用redux相关API
Code
npm install --save react-redux
Code
a.只负责 UI 的呈现,不带有任何业务逻辑
b.通过props接收数据(一般数据和函数)
c.不使用任何 Redux 的 API
d.一般保存在components文件夹下
Code
a.负责管理数据和业务逻辑,不负责UI的呈现
b.使用 Redux 的 API
c.一般保存在containers文件夹下
javascript
<Provider store={store}>
<App />
</Provider>
javascript
import { connect } from 'react-redux'
connect(
mapStateToprops,
mapDispatchToProps
)(Counter)
const mapStateToprops = function (state) { return { value: state } }
shell
npm install --save redux-thunk