redux通信和react-redux通信
flux
Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC架构是同一类东西，但是
更加简单和清晰。Flux存在多种实现(至少15种)
https://github.com/voronianski/flux-comparison
redux是flux的一种实现
Redux
Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树
（state对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，
一个新的对象就会被创建（使用actions和reducers），这样就可以进行数据追踪，实现时
光旅行。
-
管理状态，非父子通信
-
状态快照，数据缓存，减少服务器压力，提高用户体验
redux介绍及设计和使用的三大原则
- state 以单一对象存储在store中
- state只读 （每次都返回新的对象）
- 使用纯函数reduce执行state更新
下载
cnpm intsall --save redux
主要利用发布者订阅者模式
创建store对象
import {
createStore} from 'redux' //create方法创建一个store对象
//接收两个参数一个是老对象的状态，一个是发布者传过来的对象
//必须满足纯函数的写法 深复制老状态一份在改变新状态返回新状态
const reducer = (prevState={
isCollapsed:false
},action) =>{
var newstate = {
...prevState} //深复制老状态一份
newstate.isCollapsed = action.payload
return newstate
//console.log(action);
}
const store = createStore(reducer)
export default store
发布者传东西的那个组件
import store from '../../redux/store';
store.dispatch({
type:"MySideMenuCollapsed",
payload:isCollapsed
})
一旦dispatch触发就会把当前对象传给store,store借助reducer修改
订阅者 （接收东西的那个组件）
import store from '../../redux/store'
componentDidMount() {
store.subscribe(()=>{
// console.log("接收到的值",store.getState())
this.setState({
collapsed:store.getState().isCollapsed
})
})
}
需要注意在发布的时候type属性必须传，因为如果有许多组件要同时修改同一个状态的话这个时候会混淆 传了type时候可以作出判断
异步
middleware中间件 解决异步处理
- redux-thunk
- redux-promise
下载
cnpm install --save redux-thunk redux-promise
redux-thunk
可以让action返回一个函数 它会会传过来一个dispatch形参 自己决定什么时候发送action
actionCreate = ()=>{
return (dispatch)=>{
axios.get("http://localhost:8000/roles").then(res => {
// console.log(res.data)
//自己决定什么时候发送
dispatch({
type:"SetRoleList",
payload:res.data
})
})
}
import {
createStore,applyMiddleware} from 'redux' //create方法创建一个store对象
import reduxThunk from 'redux-thunk'
const reducer = (prevState={
isCollapsed:false, //管理侧边栏的隐藏和显示
roleList:[] //缓存role里面的列表
},action) =>{
let {
type,payload} = action
switch(type){
case "MySideMenuCollapsed":
var newstate = {
...prevState} //深复制老状态一份
newstate.isCollapsed = action.payload
return newstate
case "SetRoleList":
var newstate = {
...prevState}
newstate.roleList = payload
return newstate
default:
return prevState
}
//console.log(action);
}
const store = createStore(reducer,applyMiddleware(reduxThunk))
//创建store,顺便应用中间件thunk,如果action是函数我来处理
export default store
一旦store中的roleList发生变化那么store.subscribe(()=>{})就会触发所以为了避免第一开始没有值也需要订阅一次
this.unscribe = store.subscribe(()=>{
// console.log("请求结束",store.getState().roleList);
this.setState({
datalist:store.getState().roleList
})
})
同时在销毁的过程中要解除订阅
componentWillUnmount(){
this.unscribe() //取消订阅
}
redux-promise
import reduxPromise from 'redux-promise'
const store = createStore(reducer,applyMiddleware(reduxThunk,reduxPromise))
//创建store,顺便应用中间件thunk,如果action是函数我来处理
// 创建store，顺便应用中间件redux-promise,如果action 是promise，我来处理
dispatch 出去的action对象可以是promise对象则
actioncreate = ()=>{
return axios.get("http://localhost:8000/rights").then(res=>{
return {
type:"SetRightList",
payload:res.data
}
})
}
在你dispatch的时候.then可以访问到发送完成之后的promise状态
componentDidMount() {
// axios.get("http://localhost:8000/rights").then(res=>{
// // console.log(res.data);
// this.setState({
// datalist:res.data
// })
// })
if(store.getState().rightList.length===0){
store.dispatch(this.actioncreate()).then(data=>{
// console.log(data);
this.setState({
datalist:data.payload
})
})
}else{
console.log("使用缓存")
this.setState({
datalist:store.getState().rightList
})
}
}
拆分
只能有一个syore
store只能接受一个reducer
把reducer拆开一个个的，每个reducer一个文件 combineReducer合并所有的reducer
const collapsedReducer = (prevState=false,action)=>{
// console.log(action)
// “修改状态”
let {
type,payload} = action
switch(type){
case "MySideMenuCollapsed":
return payload
default:
return prevState
}
}// 只要状态已返回， 自动同步了
export default collapsedReducer
const rightListReducer = (prevState=[],action)=>{
// console.log(action)
// “修改状态”
let {
type,payload} = action
switch(type){
case "SetRightList":
var newstate = [...prevState,...payload]
return newstate
default:
return prevState
}
}// 只要状态已返回， 自动同步了
export default rightListReducer
利用combineReducers合并reducers
import {
createStore,applyMiddleware,combineReducers} from 'redux' //createStore 方法创建一个store对象
import reduxThunk from 'redux-thunk'
import reduxPromsie from 'redux-promise'
import roleListReducer from './reducers/roleListReducer'
import rightListReducer from './reducers/rightListReducer'
import collapsedReducer from './reducers/collapsedReducer'
//创建一个reducer,“修改状态” (接收老状态，修改的值， 深复制之后， 再返回一个新的状态)
//合并子 reducer
const reducer = combineReducers({
isCollapsed:collapsedReducer,
roleList:roleListReducer,
rightList:rightListReducer
})
/*
reducer保证是纯函数 --函数式
//1. 对外界没有副作用的函数
//2. 同样的输入，得到同样的输出
不是纯函数
//var myname ="kerwin"
// function test(){
// myname="xiaoming"
// }
// test()
//纯函数
// var myname ="kerwin"
// function test(myname){
// myname="xiaoming"
// }
// test(myname)
//不纯
var obj = {myname:"kerwin"}
function test(obj){
obj.myname = "xiaoming"
}
test(obj)
//纯
var obj = {myname:"kerwin"}
function test(obj){
var newobj = {...obj}
newobj.myname = "xiaoming"
}
test(obj)
*/
// store,只能接受一个reducer
// app开发 只能有一个store
// 轮船运火车 （reducer拆开一个个， 每个reducer一个文件， combineReducce(合并所有reducer)）
const store = createStore(reducer,applyMiddleware(reduxThunk,reduxPromsie))
// 默认 action 只能是普通对象 {type:""}
// 创建store，顺便应用中间件thunk,如果action 是函数，我来处理
// 创建store，顺便应用中间件redux-promise,如果action 是promise，我来处理
export default store
redux dev-tools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers(applyMiddleware(reduxThunk,reduxPromsie)))
react-redux
需要有一个高阶组件connect包裹发布者和订阅者
这样就不需要子组件发布和订阅了全部交给高阶组件
但是由于高阶组件无法直接获得store所以最外层需要一个provider来传给它
首先在项目最外层用provider组件把他包裹起来把store传进去
import store from ‘./redux/store’
class App extends Component{
render(){
return (
<Provider store={
store}>
<BlogRouter/>
</Provider>
)
}
}
import React, {
Component } from 'react';
import './App.css';
import BlogRouter from './router'
// import { NavLink } from 'react-router-dom'
import {
Provider} from 'react-redux'
import store from './redux/store'
class App extends Component{
render(){
return (
<Provider store={
store}>
<BlogRouter/>
</Provider>
)
}
}
/*
context 跨层级的通信
*/
export default App;
然后再根据高阶组件包裹
export default connect(mapStateToProps,mapDispatchToProps)(Right)
第一个参数 mapStateToProps 获得store里面的属性的这样被包裹的子组件就有了你返回的这个属性了
const mapStateToProps=(state)=>{
return {
datalist:state.rightList
}
}
```
第二个参数是用来dispatch的
```
const mapDispatchToProps = {
setList:()=>{
//返回一个promsie对象
return axios.get("http://localhost:8000/rights").then(res=>{
return {
type:"SetRightList",
payload:res.data
}
})
}
}
一旦监测到状态长度为0则发起axios请求
componentDidMount(){
if(this.props.datalist.length===0){
//
this.props.setList()
}