Redux基础使用

突然来了个项目要用redux，打的措手不及。。之前没用redux写过项目，现在要学一下。

整个应用只能有一个Store,包含项目中所有数据 生成Store createStore(fn) 想获得某个时点的数据State，就要对Store生成快照。可以通过store.getState()。一个State对应一个View。

View变化—>生成通知Action—>通过dispatch发出Action—>State变化 动作生成action,store发出dispatch将action传入，通知可以触发reducer action描述当前发生了什么事情，使用action会运送数据到Store const action={ type:’add’,//必须的,表示名称 pay:’learn’ } View要发什么消息，就有多少View。比如我input改变，触发的是同一个action,要改变的是store里面的同一个值。可以用action函数 function inputChange(value){ return { type:”input_change”, value } }

const action=inputChange(‘aaa’);

store.dispatch() View发出Action store.dispatch({ type:’input_change’, value:’aaa’ }) 这时候接受action为参数，发送出去。

然后store通过dispatch收到了action。需要给出新的state，即新的实时快照。 拿到数据要计算，所以计算的过程叫Reducer Reducer接受传过来的action和目前的state为参数，然后返回新的state

const reducer=function(state,action){ return new_state }

store.dispatch会触发Reducer的自动执行。因此，Store需要知道Reducer，这样在dispatch接受到action后能触发， 做法就是在生成Store时就将reducer传入 createStore(reducer)

store可以设置监听函数，state发生变化，则自动执行这个函数 store.subscribe()

mapStateToProps 把store里面的数据映射到connect当中关联的组件中去。 比如：

//store的数据: { text: '你好，访问者', name: '访问者', updateTime: 0 } //mapStateToProps函数 const mapStateToProps = (status)=>{ return { text: status.text, name: status.name, updateTime: status.updateTime } } //组件的使用 <div className="index"> <h3>{this.props.updateTime}</h3> <p>{this.props.text}</p> <input defaultValue={this.props.name} onChange={this.props.onChange} /> </div>

mapDispatchToProps 接受方法触发dispatch，比如接受组件中的一个change方法触发dispatch改变store数据。

const mapDispatchToProps = (dispatch)=>{ return { onChange : (e)=>dispatch({ type:'change', payload:{ value: e.target.value, updateTime: new Date() }, }) } }

connect 使用connect创建这个组件，并传入这两个函数。

export default connect(mapStateToProps,mapDispatchToProps)(MyComponent);