Redux学习(3) ----- 结合React使用

　　Redux 和React 进行结合，就是用React 做UI，因为Redux中定义了state，并且定义了改变或获取state的方法，完全可以用来进行状态管理，React中就不用保存状态了，它只要渲染UI 界面就可以了，再说，React 本来就是一个view库，渲染UI也是它的本职工作。那UI中状态发生变化，怎么办？它可以发送action，状态改变后，UI也可以通过store.getState 来获取最新的状态。

　　这样听起来非常美好，但有个现实的问题需要解决，那就是组件中怎么获取store? 组件中只有获取到store, 它才能dispatch action或get state. 一个很简单的方式，就是层层传递，根组件获取到store, 然后把store 作为props向下传递，一直传递到调用store的子组件。父子之间就是通过props进行通传信的，理论是没有问题，但是如果我们的程序层级嵌套很深的话，怎么办? 所有经过的子组件都要写store ={store} 的字样，非常繁琐，而且如果哪个组件忘记写了，程序还会报错，排查起来也很困难，这显然不是我们要想的。还有一个问题，就是UI 组件中直接包含从store.getState()获得的数据，数据和视图强耦合在一起，不利于视图的重用。这也涉及到React 的一个设计模式，容器组件和展示组件的分离。

　　简单说一下容器组件或展示组件，展示组件很简单，就是展示用的，拿到数据，渲染UI，那容器组件，就是给展示组件拿数据的，它里面包含API的调用, 异步请求等。

　　那我们现在需要解决两个问题:

　　　　1, store的传递问题, 子组件中怎么轻松地获得store。

　　　　2, 提供一个容器组件，让它去获取状态，然后把状态注入到展示组件中，而不是展示组件自己获取状态。

　　React-Redux库给我们提供了解决以上两个问题的方法:

　　　　对于第一个store传递的问题，它提供了一个Provider组件，只要把我们应用程序的根组件放到Provider组件中，根组件和它所有的子组件都会自动获取到store,当然，我们要给Provider 组件提供一个属性，就是store. 假设我们根组件是App，代码如下：

<Provider store ={store}>
    <App />
</Provider>

　　　　对于第二个问题，创建容器组件，它提供一个connect 函数。connect 作为函数，它可以接受展示组件作为参数从而返回一个组件，这里你可能想到了React的高阶组件。高阶组件就可以接受一个展示组件，然后在其内部处理数据，数据处理完成后，再给接受到的展示组件，进行页面渲染。可以看到容器组件是一个高阶组件，我们可以在其内部处理数据，也就是说在这里我们就可以从store中获取数据，同时在页面中我们还要发送action，在这里也可以一并获取。

　　但是它获取的方式有点不一样，是通过函数进行获取的。我们的容器组件获取到了store, 也就意味着我们获取到state 和 distpath, 我们要怎么将容器组件获取到的state, 和 dispatch 传递给展示组件，这里用到了两个函数，一个函数就是把state 映射到 props, 一个是把dispatch 映射到 props, 只要把这两个函数传递给connect 函数就可以了。刚才我们说了，connect 函数可以接受展示组件作为参数，其实它也是一个高阶函数，它先接受这两个映射函数作为参数，返回一个函数，然后再接受一个展示组件，返回一个容器组件。

　　把state 映射到props 的函数样式如下, 注意，它接受state作为参数，返回的是一个对象

//  把state映射到props中，组件中的props中就有了users属性
const mapStateToProps = state => (
    {
        users: state.users
    }
)

　　把dispatch映射到props 的函数样式如下, 它接受dispatch作为参数，返回的是一个对象

// 组件的props 就会有fetchUser函数
const mapDispatchToProps = dispatch => {
    return {
        fetchUsers: () => {
            dispatch({type: 'USER_FETCH'});
        }
    }
}

　　假设我们的展示组件是Users，那我们就可以conncet 生成容器组件, 如下代码中， UserContainer 就是一个容器组件

const UsersContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Users)

　　当然，mapStateToProps 和 mapDispatchToProps 函数也不是非要写的，如果只向组件中传递state，那只要第一个mapStateToProps 就可以了，mapDispatchToProps 就可以省略。如果只向组件中传递dispath, 那只需要mapDispatchToProps 就可以了，但是第一个参数mapStateToProps 的地方要写为null 如下

const UsersContainer = connect(
    null,
    mapDispatchToProps
)(Users)

　　好了，react 结合redux 内容差不多了，我们就实战一下，把Redux进阶中的随机获取人物信息的实例重构一下，代码还是从头开始写。新建一个文件夹ReactAndRedux，然后npm init -y 创建package.json 文件，再 npm i babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-preset-react webpack webpack-dev-server --save-dev 安装webpack, babel 开发依赖, 在项目中要用到React，所以不要忘记安装babel-preset-react. 创建一个webpack.config.js 用于打包，.babelrc文件使用babel

webpack.config.js 文件如下

const path = require('path');

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'，

　　　　　　publicPath: 'dist/'

    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
}

　　.babelrc 文件如下：

{"presets" : ["env", "stage-2", "react"]}

　　现在再新建一个index.html文件，script标签也应该引入bundle.js打包后的文件，作为骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <body>
        <div id="app"></div>
        <script src='./dist/bundle.js'></script>
      </body>
</body>
</html>

　　最后新建一个src文件夹用到存放我们的源代码，在src文件夹中新建index.js，作为入口，因为是由Redux来管理我们的状态，所以要建立store.js文件存放我们的store, actions 文件夹来存我们的action， reducers存放我们的reducer. React部分则分成展示组件和容器组件，所以还要新建两个文件夹，containers 和 components 来存放它们。当然还要安装react ,redux. npm i react redux react-dom react-redux --save. 整个项目文件如下：

Redux学习(3) ----- 结合React使用

　　现在测试一下webpack的配置有没有问题 , 在package.json 文件的scripts中，写入"dev": "webpack-dev-server", 现在npm run dev启动服务。

　　在index.js文件中写入 document.getElementById('app').innerHTML = 'hello' ，可以看到浏览器中出现了hello，现在更改hello 为hel , 浏览器hel。 webpack配置没有问题，现在可以安心的写代码了。

　　1，定义整个应用状态的state结构

// state 状态
const initalState = {
    user: {
      name: '',
      email: '',
      gender: ''
    },
    status: '',
    statusClass: ''
}

　　2 ，确定reducer，因为我们整个应用就是点击按钮，请求数据，它是一个异步请求，所以有三个行为，我们要定义对应三个action 的 reducer, 异步用到了 redux-promise-middleware. 这里还要npm install redux-promise-middleware, 同时安装上redux-logger 日志进行记录，如发送 FETCH_USER action，那么reducer 对应的三个action 就是FETCH_USER_PENDING，FETCH_USER_FULFILLED，FETCH_USER_REJECTED . 在Reducer文件中新一个userReducer.js文件，不要忘记export default 语句

// state 状态
const initalState = {
    user: {
      name: '',
      email: '',
      gender: ''
    },
    status: '',
    statusClass: ''
}

// REDCUER
function userReducer(state=initalState, action) {
    const user = {
      name: '',
      email: '',
      gender: ''
    };

    switch (action.type) {
      case 'FETCH_USER_PENDING':
        return {...state, sendingRequest: true, status: 'Pending...', statusClass: 'pending'}
        break;
      case 'FETCH_USER_FULFILLED':
        user.name = `${action.payload.data.results[0].name.first} ${action.payload.data.results[0].name.last}`
        user.email = action.payload.data.results[0].email;
        user.gender = action.payload.data.results[0].gender;
        return {...state, sendingRequest: false, user, status: 'User Recieved', statusClass: 'success'}
      break;
      case 'FETCH_USER_REJECTED':
      return {...state, sendingRequest: false, status: `${action.payload.message}`, statusClass: 'error'}
      default:
        return state
    }
}

export default userReducer;

　　3，现在我们就可以写store了，直接在store.js中书写代码。

import {createStore, applyMiddleware} from 'redux';
import {createLogger} from 'redux-logger';
import promise from 'redux-promise-middleware';
import userReducer from './reducers/reducer';

const store = createStore(    userReducer,
    applyMiddleware(createLogger(), promise()))

export default store;

　　4， action 就简单了，它直接发送一个ajax请求就可以了，在actions文件夹中新建userAction.js文件，发送请求用到了axios，这里要安装它, npm install axios --save. 在actions 文件夹下新建userAction.js 文件，内容如下：

import axios from 'axios';

const fetchUsers = function() {
    return {
        type: 'FETCH_USER',
        payload: axios.get('https://randomuser.me/api/')
    }
}

export default fetchUsers;

　　5， redux方面的事情已经完事了，现在再来写react。react 分为了两个部分，展示组件或容器组件。

　　容器组件，就是把state 和 dispatch 映射为props，从而可以在展示组件中使用，这里要用connect 高阶函数，同时我们还要命名一个展示组件。我们在container 文件夹中新建一个userContainer.js 文件，同时在components文件夹新建一个user.js文件。 userContainer.js文件如下

import {connect} from 'react-redux';   // 引入connect函数用来生成容器组件
import User from '../components/user';  // 引入展示组件
import fetchUsers from '../actions/userAction'; // 引入要发送的action

// 把state 映射到props中
const mapStateToProps = state => (
    {
        data: state
    }
)

// 把dispatch 映射到props中
const mapDispatchToProps = dispatch => ({
    fetchUser: () => {
        dispatch(fetchUsers())
    }
})

const UserContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(User)

export default UserContainer;

　　现在我们的展示组件的props 有了data属性，它就是从state中获取的状态，同时还有了fetchUser 属性，用来发送action, 现在来写user.js 展示组件

import React from 'react';

// es6 的解构赋值来获取属性
const User = ({data, fetchUser}) => (
    <div>
        <button className="btn btn-blue" onClick={fetchUser}>New Random User</button>
        <h2 className ={data.statusClass}>{data.status}</h2>
        <h2>{data.user.name}</h2>
        <h2>{data.user.email}</h2>
        <h2>{data.user.gender}</h2>
    </div>
)

export default User;

　　6， ReactDOM 把组件渲染出来，代码写在index.js中。

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';  // 引入Provider 组件，传递store
import UserContainer from './containers/userContainer';  // 引入容器组件
import store from './store';   // 引入store

// Provider 组件包含容器组件，从而容器组件和其下面的子组件都会获取到

ReactDOM.render(
    <Provider store ={store}>
        <UserContainer />
    </Provider>,
    document.getElementById('app')
)

　　启动服务器，页面上只有一个按钮，当我们点击按钮后，它获取数据

Redux学习(3) ----- 结合React使用

秒客网

Redux学习(3) ----- 结合React使用

相关文章