React + Redux 在recat中不使用redux 时遇到的问题
在react中组件通信的数据是单向的，顶层组件可以通过props属性向下层组件传递数据，而下层组件不能向上层组件传递数据，要实现下层组件修改数据，需要上层组传递修改数据的方法到下层组件，当项目越来越的时候，组件之间传递数据变得越来越困难
使用redux管理数据，由于Store独立于组件，使得数据管理独立于组件，解决了组件之间传递数据困难的问题
组件通过 dispatch 触发action
store 接受 action 并将 action 分发给 reducer
reducer 根据 action 类型对状态进行更改并将更改后的数据返回给store
组件订阅了store中的状态，store中的状态更新会同步到组件
创建项目，并安装 redux
# 如果没有安装react脚手架则执行这条命令安装reate脚手架 npm install -g create-react-app # 创建reate项目 create-react-app 项目名 # 进入项目 cd 项目名 # 安装 redux npm install redux reate-redux引入redux，并根据开始实现的代码在react中实现计数器
//index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { createStore } from 'redux'; const initialState = { count: 0 } function reducer(state = initialState, action) { switch (action.type) { case 'increment': return { count: state.count + 1 } case 'decrement': return { count: state.count - 1 } default: return state } } const store = createStore(reducer) const increment = { type: 'increment' } const decrement = { type: 'decrement' } function Count() { return <div> <button onClick={() => store.dispatch(increment)}>+</button> <span>{store.getState().count}</span> <button onClick={() => store.dispatch(decrement)}>-</button> </div> } store.subscribe( () => { console.log(store.getState()) ReactDOM.render( <React.StrictMode> <Count /> </React.StrictMode>, document.getElementById('root') ); }) ReactDOM.render( <React.StrictMode> <Count /> </React.StrictMode>, document.getElementById('root') );明显以上方式虽然可以实现计数器的功能，但在实际项目中肯定不能这样使用，因为组件一般都在单独的文件中的，这种方式明显在其他组件中并不能获取到Store。
计数器案例代码优化-让store全局可访问为了解决Store获取问题需要使用react-redux来解决这个问题，react-redux给我们提供了Provider组件和connect方法
Provide 组件
是一个组件 可以吧创建出来的store 放在一个全局的地方,让组件可以拿到store,通过provider组件,将 store 放在了全局的组件可以够的到的地方 ,provider要求我们放在最外层组件
connect
connect 帮助我们订阅store中的状态，状态发生改变后帮助我们重新渲染组件
通过 connect 方法我们可以拿到 store 中的状态 把 store 中的状态映射到props中
通过 connect 方法可以拿到 dispatch 方法
connect 的参数为一个函数 这个函数可以拿到store中的状态，要求我们这个函数必须返回一个对象，在这个对象中写的内容都会映射给组件的props属性
connect 调用后返回一个函数 返回的这个函数继续调用需要传入组件告诉connect需要映射到那个组件的props
新建 Component 文件夹、创建 Count.js 文件
import React from 'react' function Count() { return <div> <button onClick={() => store.dispatch(increment)}>+</button> <span>{store.getState().count}</span> <button onClick={() => store.dispatch(decrement)}>-</button> </div> } export default Count引入 Provider 组件放置在最外层，并制定store
ReactDOM.render( // 通过provider组件 将 store 放在了全局的组件可以够的到的地方 provider要求我们放在最外层组件 <Provider store={store}><Count /></Provider>, document.getElementById('root') );引入 connect 方法 根据 connect 的使用来包裹组件
const mapStateProps = state => ({ count: state.count, a: '1' }) // connect 的参数为一个函数 这个函数可以拿到store中的状态，要求我们这个函数必须返回一个对象，在这个对象中写的内容都会映射给组件的props属性 // connect 调用后返回一个函数 返回的这个函数继续调用需要传入组件告诉connect需要映射到那个组件的props export default connect(mapStateProps)(Count)