react中redux的理解

// /store/index.js
import {createStore} from ‘redux‘;
import reducers from ‘./reducers‘//reducers是纯函数
const store=createStore(reducers);
export default store;

// /store/reducers.js
const defaultState={//defaultState的作用是在第一次执行(初始化)时给state一个值,以防报错
n:10//函数内部必须有一个默认的state
m:20
}
//函数必须返回一个state
export default (state=defaultState,actions)=>{
switch(action.type){
case "ADD_NUM":
//基础类型用Object.assign就可以了(也可以用深拷贝,就是深拷贝耗费性能),引用类型用深拷贝
//let newState=JSON.parse(JSON.stringify(state));
let newState=Object.assign({},state);//必须复制整个state,因为返回也要整个state
newState.n++;
console.log(‘1‘,newState)//打印发现1从第二次开始就一直显示了
return newState;
break;
}
console.log(‘2‘,state)
return state//打印发现2只显示一次,表明这句代码只有在初始化时执行,因为初始化时,state,action还没有传入值

}

//App.js
import React, { Component } from ‘react‘
import store from ‘./store/index.js‘;
import {addAction} from ‘./action‘
export default class App extends Component {
constructor(){
super();
this.state=store.getState();
store.subscribe(this.updateHancler.bind(this));//store自带方法,等于$on
}
render() {
return (
<div>
<h2>{this.state.n}</h2>
<button onClick={this.clickHandle.bind(this)}>点击</button>
<ul>{//这里要有打括号
list.map((item,index)=>(//用括号包起来表示返回了
<li key={index}>{item}</li>//必须有key
))
}
</ul>
</div>
)
}
clickHandle(){
store.dispatch(addAction())//action必须拆分出来,这是规定
}
updateHancler(){
this.setState(store.getState())
}
}
//action/index.js
import {AddNum} from "./type"
export const addAction = ()=>({
type: AddNum
})
export const updateSubmitActions={//action可以是函数也可以是对象
type:updateSubmit,
}
//action/type.js
export const AddNum = "ADD_NUM"