react之路：redux的使用

github仓库地址：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仓库

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

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

const defaultState = {
    focused: false
}

export default (state = defaultState, action) => {
    return state
}

使用store

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

import { Provider } from 'react-redux'
import store from './store'

class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                .......
            </Provider>
        )
    }
}

export default App;    

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

import React from 'react'
import { connect } from 'react-redux'

class Header extend  React.Component {

    render () {
        return (
           <div>
               <input />
           </div>
        )
    }  

}

/**
 * 将仓库的state映射到props(获取state)
 * @param state
 */
const mapStateToProps = (state) => {
    return {

    }
}

/**
 *  将dispatch映射到props(改变state)
 * @param dispatch
 */
const mapDispatchToProps = (dispatch) => {
    return {

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header) 

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

import React from 'react'
import { connect } from 'react-redux'

class Header extend  React.Component {

    render () {
        return (
           <div>
               <input 
                   value={this.props.focused}
                   onFocus={props.handleInputFocus}
                   onBlur={props.handleInputBlur}
                />
           </div>
        )
    }  

}

/**
 * 将仓库的state映射到props(获取state)
 * @param state
 */
const mapStateToProps = (state) => {
    return {
        focused: state.focused
    }
}

/**
 *  将dispatch映射到props(改变state)
 * @param dispatch
 */
const mapDispatchToProps = (dispatch) => {
    return {
        // 聚焦
        handleInputFocus () {
            const action = {
                type: 'search_focus'
            }
            dispatch(action)
        },
        // 离焦
        handleInputBlur () {
            const action = {
                type: 'search_blur'
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header) 

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

const defaultState = {
    focused: false
}

export default (state = defaultState, action) => {

    if (action.type === 'search_focus') {
        return {
            focused: true
        }
    }

    if (action.type === 'search_blur') {
        return {
            focused: false
        }
    }
    
    return state
}

总结

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

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

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

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