redux精简执行流程：
1，创建reducer,并给默认值
2, 根据已经创建的reducer创建store
3, this.state=store.getState();给组件store赋值，然后 value={this.state.inputValue}既可以将数据展示到页面
4，当页面数据状态进行改变的时候，需要创建action，store.dispatch(a ction);并将action 分发到store，store再转交给reducer处理
5，reducer进行处理之后，会返回新的state给storage,
if(action.type="changeInput"){
console.log(action.value);
let newState=JSON.parse(JSON.stringify(state));
newState.inputValue=action.value;
return newState;
}
6, store.subscribe(this.storeChange);组件对store状态进行订阅，每一次storage里的状态更改的时候，就会触发订阅函数，这里是组件内定义的storeChange。
需要注意的地方：
1，只能有一个store
2, reducer不能改变state,只有store可以改变state
3,reducer必须是纯函数
纯函数：
函数不依赖于外部任何变化，只依赖输入参数，返回结果是由传入值决定的。
import {createStore} from "redux"
import React from 'react'
import ReactDOM from 'react-dom'
//创建reducer
let defaultValue={
inputValue:"这是输入默认数值",
dataList:[1,2,3,6,7,8,11]
}
let reducer=(state=defaultValue,action)=>{
if(action.type="changeInput"){
console.log(action.value);
let newState=JSON.parse(JSON.stringify(state));
newState.inputValue=action.value;
return newState;
}
return state;
}
//创建store仓库
let store =createStore(reducer);
//渲染页面
class App extends React.Component{
constructor() {
super();
this.state=store.getState();
this.storeChange=this.storeChange.bind(this);
store.subscribe(this.storeChange);
this.changeInput=this.changeInput.bind(this);
}
render(){
return <div>
<input type="text" value={this.state.inputValue} onChange={this.changeInput}/><button>提交</button>
<ul>
{this.state.dataList.map((item,index)=>{
return <li key={index}>这是第{item}个数据</li>
})}
</ul>
</div>
}
storeChange(){
console.log(this.setState);
this.setState(store.getState());
}
changeInput(){
let action={
type:"changeInput",
value:this.value
}
store.dispatch(action);
}
}
ReactDOM.render(<App></App>,document.getElementById("root"));
redux-thunk中间件
可以处理异步请求流程
react-redux
react-redux处理流程 1，store和reducer的创建和redux一致 2，Provider包含的子组件都可以使用store里面的state
return <Provider store={store}>
<Todo/>
</Provider>
3,用connect处理子组件状态与store进行交互 let Todo = connect(stateToProps, changeToProps)(TodoList) stateToProps：将组件的属性与state的props对应起来 changeToProps：将事件与组件属性对应起来
注意:当非受控组件变为受控组件的时候是不允许的
所以当value不存在时，用''进行填充
<input type="text" value={inputValue || ''} onChange={inputChange}/>
import {createStore} from "redux"
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider, connect} from 'react-redux'
//创建reducer
let defaultValue = {
inputValue: "这是输入默认数值",
dataList: [1, 2, 3, 6, 7, 8, 11]
}
let reducer = (state = defaultValue, action) => {
if (action.type = "inutChange") {
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
return state;
}
//创建store仓库
let store = createStore(reducer);
let stateToProps = (state) => {
return {
inputValue: state.inputValue,
dataList: state.dataList
}
}
let changeToProps = (dispatch) => {
return {
inputChange: (e) => {
let action = {
type: "inutChange",
value: e.target.value
}
dispatch(action);
}
}
}
//渲染页面
function TodoList(props) {
let {inputValue, inputChange, dataList} = props;
return <div>
<input type="text" value={inputValue || ''} onChange={inputChange}/>
<button>提交</button>
<ul>
{dataList.map((item, index) => {
return <li key={index}>这是第{item}个数据</li>
})}
</ul>
</div>
}
let Todo = connect(stateToProps, changeToProps)(TodoList)
function App() {
return <Provider store={store}>
<Todo/>
</Provider>
}
ReactDOM.render(<App></App>, document.getElementById("root"));
react和redux的区别和联系：
共同点：创建store和reducers的方式是一样的
不同点：redux:
通过store.subscribe(this.storeChange);订阅store,从而达到当store中的状态改变的时候，组件也会对应的改变.
通过store.dispatch(action)来改变store中的状态。
react-redux:
通过stateToProps达到store中的state与props的同步。
通过changeToProps来达到dispatch action，但是依然是使用了dispatch:
inputChange: (e) => {
let action = {
type: "inutChange",
value: e.target.value
}
dispatch(action);
}
react-redux中使用了Provider和connect组件，Provider是store的提供父组件，而connect包装的是使用store的子组件。
注意：
需要将connect封装后的子组件传递给父组件。
Provider和connect是react-redux提供的组件，但是createStore是redux的提供的方法。
