github仓库地址：

简介

redux主要是用来记录数据状态，然后共享数据。每个react组件都可以获取该数据库中的数据，也可以改变该数据库中的数据。

引入redux

项目目录下的控制台输入：

yarn add redux 或 npm install --save redux

yarn add react-redux 或 npm install --save react-redux

创建store

一般在项目文件夹下创建一个store文件夹，里面创建index.js和reducer.js两个文件

index.js：创建store仓库

1 import { createStore } from 'redux'2 import reducer from './reducer'3 4 const store = createStore(reducer)5 6 export default store

reducer.js：存放store需要的数据

1 const defaultState = {2     focused: false3 }4 5 export default (state = defaultState, action) => {6     return state7 }

使用store

1.app.js中引入Provider以及store,用Provider将整个组件包裹起来，然后将store当作属性传递给Provider,主要的功能是将store提供给整个组件使用

1 import { Provider } from 'react-redux' 2 import store from './store' 3  4 class App extends React.Component { 5     render() { 6         return ( 7             
     
       8                 ....... 9             
     10         )11     }12 }13 14 export default App;

 2.在需要使用store的组件中，先引入connect， 然后创建mapStateToProps和mapDispatchToProps，最后在connect(mapStateToProps, mapDispatchToProps)(组件名)

1 import React from 'react' 2 import { connect } from 'react-redux' 3  4 class Header extend  React.Component { 5  6     render () { 7         return ( 8            
     
       9                
      10            
     
11         )12     }  13 14 }15 16 /**17  * 将仓库的state映射到props(获取state)18  * @param state19  */20 const mapStateToProps = (state) => {21     return {22 23     }24 }25 26 /**27  *  将dispatch映射到props(改变state)28  * @param dispatch29  */30 const mapDispatchToProps = (dispatch) => {31     return {32 33     }34 }35 36 export default connect(mapStateToProps, mapDispatchToProps)(Header)

3.组件获取store中的数据，以及组件使用action发起改变store数据请求

1 import React from 'react' 2 import { connect } from 'react-redux' 3  4 class Header extend  React.Component { 5  6     render () { 7         return ( 8            
     
       9                
      14            
     
15         )16     }  17 18 }19 20 /**21  * 将仓库的state映射到props(获取state)22  * @param state23  */24 const mapStateToProps = (state) => {25     return {26         focused: state.focused27     }28 }29 30 /**31  *  将dispatch映射到props(改变state)32  * @param dispatch33  */34 const mapDispatchToProps = (dispatch) => {35     return {36         // 聚焦37         handleInputFocus () {38             const action = {39                 type: 'search_focus'40             }41             dispatch(action)42         },43         // 离焦44         handleInputBlur () {45             const action = {46                 type: 'search_blur'47             }48             dispatch(action)49         }50     }51 }52 53 export default connect(mapStateToProps, mapDispatchToProps)(Header)

同时，reducer.js需要接收改变store的action请求，并改变store

1 const defaultState = { 2     focused: false 3 } 4  5 export default (state = defaultState, action) => { 6  7     if (action.type === 'search_focus') { 8         return { 9             focused: true10         }11     }12 13     if (action.type === 'search_blur') {14         return {15             focused: false16         }17     }18     19     return state20 }

总结

store的理解：把整个过程理解成对一个图书馆的书籍管理，store相当于一个图书馆，然后reducer里面的数据相当于是图书馆的书籍。

首先需要通过createStore创建一个图书馆，创建图书馆的时候，图书馆的书籍不可能为空，所以创建的时候需要把初始的书籍传入进去，即reducer。

然后需要将该图书馆给所有的人使用，所以需要在app.js通过Provider提供给大家

当某个人需要使用图书馆里面的书的时候，需要使用connect连接起来，并且需要创建使用书籍的方式。