定义redux的基本文件
第一步：store.js文件（银行）
- 1.新建一个store，createStore需要传入一个(state,action)=>{}的箭头函数，以及saga的中间件并应用该中间件
applyMiddleware(sagaMiddleware) - 2.新建一个saga的中间件
sagaMiddleware = createSagaMiddleware()，并启动中间件sagaMiddleware.run(mySaga) - 3.启动saga中间件，需要传入saga的js文件
mySaga
import {createStore, compose, applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducers from './reducers'
import mySaga from './sagas'
//创建saga中间件
const sagaMiddleware = createSagaMiddleware()
//兼容性的考虑
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
//创建一个store，reducers外部引入存放(state，action)=>{}；
//applyMiddleware(sagaMiddleware)引入中间件
const store = createStore(reducers, applyMiddleware(sagaMiddleware))
//运行saga，mySaga的逻辑引入
//https://github.com/redux-saga/redux-saga
sagaMiddleware.run(mySaga)
export default store
第二步：reducers.js文件（业务经理）
- 1.定义一个
(state,action)=>{return}箭头函数，给予新建createStore的传参 - 2.
state = defaultState设置一个默认值，定义redux来维护的数据存储 - 3.
action为一个结构体，action.type定义了action的类型，以及必要的行为参数 - 4.
import {INIT_DATA} from './actionTypes'统一action的行为类型，避免出错
import {INIT_DATA} from './actionTypes'
const defaultState = {
list: [],
}
export default (state = defaultState, action) => {
if (action.type === INIT_DATA) {
const newState = JSON.parse(JSON.stringify(state))
newState.list = [{
text: 'welcome',
url: '/welcome'
},
{
text: 'goods',
url: '/goods'
},
]
return newState
}
return state
}
第三步 actionCretors.js（客户经理）
- 1.actionCretors定义具体action的行为，具体包括action的行为类型，以及行为依赖的参数
- 2.action定义基本类型为一个对象()=>({})
- 3.
import {INIT_DATA} from './actionTypes'统一action的行为类型，避免出错
import {INIT_DATA} from './actionTypes'
//初始化数据
export const initDataAction = ()=>({
type:INIT_DATA
})
直至基本完成的redux的定义
1.新建一个银行store，store里面需要有具体的业务经理，即reducer。createStore(reducer, appleMiddleware())，需要传入reducer。
2.reducer业务经理，需要与客户经理对接，之间的沟通方式就是action.type（即业务类型）。reducer的定义是(state,action)=>{}, state为存储的数据结构，action为行为。
3.action为客户经理，需要具体业务的类型action.type，以及办理业务需要的材料action.param。action行为的基本定义()=>({type:${type}, ...})。
react-redux
相比原始的redux，使用react-redux下的connect统一监听store的数据变化
具体使用步骤：
步骤一：yarn add react-redux
步骤二：在index.js最外层的html标签套一个<Provider store={store}></Provider>，是的react-redux能够维护store的数据变化
步骤三：export default connect(mapStateToProps, mapDispatchToProps)(App);其中mapStateToProps将store的state赋值给当前控件props，mapDispatchToProps将action赋值给当前控件props
案例
//index.js
//<Provider>最外层，目的是App下的标签都被react-redux所监听管理到
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
//App.js
import './App.css';
import React from 'react'
import {connect} from 'react-redux'
import {addBookAction} from './store/actionCretors'
class App extends React.Component {
constructor(props) {
super(props);
}
//按点响应函数，去执行action
addBook = ()=>{
//action被赋值了addBook行为
this.props.addBook()
}
render() {
const {list} = this.props
return (
<div className="App">
<button onClick={this.addBook}>添加book</button>
{
list.map((temp, index)=>{
return (
<li key={index}>
{temp.text}
</li>
)
})
}
</div>
);
}
}
//react-redux将store的state赋值给当前控件的props
const mapStateToProps = (state) => {
return {
// 将state.list赋值当前控件的props，即this.props.list=store.state.list
list:state.list
}
}
//react-redux将store的actions行为赋值给当前控件的props
const mapDispatchToProps = (dispatch) => {
return {
addBook() {
const action = addBookAction()
dispatch(action)
},
}
}
//react-redux的connect固定调用
export default connect(mapStateToProps, mapDispatchToProps)(App);
saga配置
saga的作用是接受函数型的action，而不是像redux只能接受对象型的action。
具体使用规则：
步骤一：yarn add redux-saga
步骤二：新建sagas.js文件，具体参考git说明https://github.com/redux-saga/redux-saga。
- takeEvery()将行为类型与行为操作进行关联
- 行为操作使用put再次去调用redux
//定义一个函数，用于监听到行为后对应的操作
function* addSagaData() {
console.log('addSagaData')
const list = {
text: 'sagaData',
url: '/sagaData',
}
//异步，执行redux下的action
yield put({
//行为类型
type:ADD_BOOK_SAGA_RECV,
//行为参数
list:list,
})
}
function* mySaga() {
//将ADD_BOOK_SAGA_SEND与函数addSagaData进行关联
yield takeEvery(ADD_BOOK_SAGA_SEND, addSagaData);
}
export default mySaga;
步骤三:reducers.js根据action.type定义行为
import {ADD_BOOK, ADD_BOOK_SAGA_RECV} from './actionTypes'
export default (state = defaultState, action) => {
//saga行为操作通过yield put异步发送redux
if (action.type == ADD_BOOK_SAGA_RECV){
const newState = JSON.parse(JSON.stringify(state))
newState.list.push(action.list)
return newState
}
return state
}
步骤四：App.js中的使用，与react-redux一致
//1.mapDispatchToProps定义saga的方法
const mapDispatchToProps = (dispatch) => {
return {
addSagaList(){
console.log('saga')
const action = addBookSagaSendAction()
dispatch(action)
}
}
}
//2.props方法进行调用
<button onClick={this.props.addSagaList}>saga测试</button>
