redux使用回顾和核心
1.组件如何触发store中的state改变
createStore(reducer)
引入store
store.dispatch（action）方法
reducer根据不同action type 返回新的state部分
2.组件如何监听store的改变从而改变自身的props
组件通过store.subscribe(回调方法)方法监听store的改变
回调方法去store.getState()获取新的state内容从而修改自身的state
react-redux如何完成以上的两个功能
1.provider
import {Provider} from 'react-redux'
import store from './reducer/store'
//用到jsx语法时 必须导入react 包
const App = (
<Provider store ={store}>
<Todolist/>
</Provider>
)
ReactDOM.render(App, document.getElementById('root'));
2..connect
import React, { Component } from 'react';
import {connect } from 'react-redux'
class ToDoList extends Component {
render() {
return (
<div>
<input onChange={this.props.onchange} value={this.props.inputValue}/>
<button>提交</button>
<ul>
<li>hello</li>
</ul>
</div>
)
}
}
const mapStateToProps = (state) =>{
return {
inputValue:state.inputValue
}
}
const mapDispatchToProps = (dispatch) =>{
return {
onchange(e){
const action ={
type :"change_state",
inputValue:e.target.value
}
dispatch(action)
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(ToDoList)
3.reducer
export default (state=defaultState,action)=>{
switch(action.type){
case 'change_state' :
let state1 = JSON.parse(JSON.stringify(state));
state1.inputValue = action.inputValue;
return state1;
break;
default:
return state;
}
}