回顾Vuex
核心内容
- store树存储所有module，state，getter，mutation，action，在index.js入口文件使用Vue.use(vuex)，向根组件注入store树。
- mutation中可以对state进行一些简单的同步操作
- action中处理异步操作
- 只能通过dispatch(action)或者commit(mutation)来改变store树状态
- 提供mapGetters,mapMutations,mapStates,mapActions等辅助函数，方便各个组件混入状态
- 也是单向数据流
react父子组件传值
父组件传递给子组件
// 父
render(){
return <Child msg={ this.state.msg }>
}
...
// 子
render(){
//接收
return <p>{ this.props.msg }</p>
}
子组件传给父组件
// 父
return <Child fn={ ()=>this.fn }>
// 子
componentDidMount(){
// 通过调用父组件传递的函数，向其中传递子组件需要传递给父组件的参数，类似于jsonp技术，父组件相当于服务端
this.props.fn( data )
}
兄弟组件通信需要依赖于他们拥有的共同的父组件，父组件通过传给子组件1函数的形式获取子组件1要传给子组件2的data再在子组件2的template上通过props传给子组件2，达到兄弟同信的效果。
接触Redux
在react中的父子组件通信也类似于vue，甚至可以说一样[笑哭脸]，同样当数据流十分复杂时，父子组件间的通信会非常得混乱和不直观，不宜于阅读和编写，所以才产生的redux。
- 同样的redux也是通过向根组件注入store来管理全局状态。
- 要使用Redux，首先在入口文件index.js引入至少两个东西，一个是redux中的createStore模块，还有一个自己写的reducer模块。通过
createStore(reducer)来创建Store树。然后在根组件上注册。 - Redux默认只运行同步操作，如果有异步操作还需要使用redux提供的applyMiddleware中间件，并安装redux-thunk获取其中唯一的thunk模块，传入中间件，并将其写入createStore的第二个参数，使得此时的store树内的状态可以被异步更改了。
- 介绍一下reducer，自行编写的reducer导出两个东西，一个是reducer简历，reducer简历通过接受state和action两个参数，根据action.type来进行对state的更改，第二个就是许许多多的actions，可以类比于vuex中的mutation和action的结合体，action是函数，返回的对象包含了action的type和用于更改state的数据。这些actions需要通过dispatch(action())来触发。
- 然后，为了不在每个组件写入需要的store树，引入react-redux模块，其中的Provider在入口文件作为template包裹根结点，并传入store，从而达到注入的效果。
ReactDOM.render(
// 提供provider函数，应用在最外层，传入store即可，所有的action也不用一个一个传进来了
(<Provider store={store}>
<App/>
</Provider>),
document.getElementById('root')
)
- 再然后，根组件的生成过程中引入react-redux的connect模块，connect模块接收两个函数作为参数，一个是mapStatetoProps，将store中的State属性混入props，一个是所需的actions对象的一个集合对象actionCreators。然后connect函数返回一个函数接受根组件为参数(装饰者模式),返回一个全新的App组件，从而在组件中只需简单地使用this.props.action就能触发store树的改变，通过this.props.stateName就能获取Store树的内容。
import { connect } from 'react-redux'
import { add,reduce,addSync } from './index.redux.js';
const mapStatetoProps = (state) => {
return { num:state }
}
const actionCreators = { add,reduce,addSync }
class App extends React.component{...}
// 装饰App
App = connect(mapStatetoProps,actionCreators)(App)
// @connect(mapStatetoProps,actionCreators)和上面代码相同，但是需要引入plugins插件
export default App
- reducer组合，为了处理页面逻辑，一般每个页会单独写一个reducer，之后把所有的reducer整合在一起，通过redux的combineReducers函数组合所有的reducer，之后在根节点创建store时，通过改reducers创建，则每个组件都能通过this.props访问到所有的reducer中的state了。~~~
-
通过reducers来修改状态，dispatch(action) [或者!!!] 触发整合后的action函数返回了reducers对象，都会触发reducer。
export reducer 因为要在reducer.js中整合所有的reducer
export actions 因为在组建中要使用并触发这些action
不过还是感觉vue写得舒服0 0
代表开发者谢谢二位😏😛😜