react之路：redux的使用

绝地灬酷狼 2021-11-22 11:10 276阅读 0赞

github仓库地址：[https://github.com/wanghao12345/react-book][https_github.com_wanghao12345_react-book]

### 简介 ###

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: false
    3 }
    4 
    5 export default (state = defaultState, action) => {
    6     return state
    7 }

### 使用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             <Provider store={store}>
     8                 .......
     9             </Provider>
    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            <div>
     9                <input />
    10            </div>
    11         )
    12     }  
    13 
    14 }
    15 
    16 /**
    17  * 将仓库的state映射到props(获取state)
    18  * @param state
    19  */
    20 const mapStateToProps = (state) => {
    21     return {
    22 
    23     }
    24 }
    25 
    26 /**
    27  *  将dispatch映射到props(改变state)
    28  * @param dispatch
    29  */
    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            <div>
     9                <input 
    10                    value={this.props.focused}
    11                    onFocus={props.handleInputFocus}
    12                    onBlur={props.handleInputBlur}
    13                 />
    14            </div>
    15         )
    16     }  
    17 
    18 }
    19 
    20 /**
    21  * 将仓库的state映射到props(获取state)
    22  * @param state
    23  */
    24 const mapStateToProps = (state) => {
    25     return {
    26         focused: state.focused
    27     }
    28 }
    29 
    30 /**
    31  *  将dispatch映射到props(改变state)
    32  * @param dispatch
    33  */
    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: true
    10         }
    11     }
    12 
    13     if (action.type === 'search_blur') {
    14         return {
    15             focused: false
    16         }
    17     }
    18     
    19     return state
    20 }

### 总结 ###

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

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

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

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

转载于:https://www.cnblogs.com/wanghao123/p/11152634.html

[https_github.com_wanghao12345_react-book]: https://github.com/wanghao12345/react-book