redux工作流程
redux使用
安装依赖：cnpm install redux --save
src/store/index.js
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
/**
**如果使用redux-deveTools开发工具（浏览器扩展插件）**
**const store = createStore(**
**reducer,**
**window.__REDUX_DEVTOOLS_EXTENSION__&&__REDUX_DEVTOOLS_EXTENSION__()**
**)**
***/**
export default store
sre/store/reducer.js
const defaultState = {
inpoutValue:'write Something',
list:[
"任务1",
"任务2",
"任务3"
]
}
export default (state = defaultState,action)=>{
** // Reducer里只能接收state,不能改变state**
if(action.type==="changeInput"){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState // 相当于Reducer把数据返回给 Store
}
if(action.type==='addItem'){
let newState = JSON.parse(JSON.stringify(state)) // 这样写为了深拷贝
newState.list.push(newState.inputValue);
newState.inputValue = "";
return newState;
}
if(action.type==='deleteItem'){
let newState = JSON.parse(JSON.stringify(state)) // 这样写为了深拷贝
newState.list.splice(action.index,1)
return newState;
}
return state
}
组件里使用
import store from './store/index.js'
class TodoList extends Component{
constructor(props){
super(props)
conosole.log(store.getState());// 就可以拿到reducer.js里面的数据了
this.state = store.getState() // 然后dom中就可以渲染reducer里面的数据了
this.changeInputValue = this.changeInputValue.bind(this);
this.storeChange= this.storeChange.bind(this);
this.clickBtn= this.clickBtn.bind(this);
store.subscribe(this.storeChange) // 订阅,[目的：把redux的store数据同步到当前组件中,触发更新]
}
changeInputValue(){
**// 创建action**
const action = {
type:"changeInput",
value:e.target.value
}
**// 把action值传给reducer**
store.dispatch(action)
}
storeChange(){
this.setState(store.getState()); // 把redux的store数据同步到当前组件中,触发更新
}
clickBtn(){
const action = {
type:'addItem'
}
store.dispatch(action)
}
deleteItem(index){
const action = {
type:'addItem',
index
}
store.dispatch(action)
}
render(){
return (
<div>
<div>
<Input
value={this.state.inputValue}
onChange={this.changeInputValue}
/>
<Button
type="primary"
onClick={this.clickBtn}
>增加</Button>
</div>
<div>
<List
bordered
dataSource={this.state.list}
renderItem={(item,index)=>(<List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>)}
/>
</div>
</div>
)
}
}
中间件redux-thunk和redux-saga
1.redux-thunk：
cnpm install --save redux-thunk
不适用增强函数
使用增强函数
2.中间件redux-saga
cnpm install --save redux-sage
接口请求写在sages.js文件里
react-redux
Provider和Connet
