react中使用redux数据流开发大型网站教程

来源:程序思维浏览:1477次
当页面渲染完成后,UI就已经出现,用户触发了UI上的一些action,action将被送到一个叫Reducer的方法里面去,Reducer将会更新Store,Store中包含state。



使用场景

组件之间共享信息,例如,用户登录之后客户端会存储用户信息(如userid、头像等),而系统的很多个组件都会用到这些信息,例如收藏、点赞、评论等。因此每个系统都需要一个管理多组间使用的公共信息的功能,这就是Redux的作用。

安装Redux

npm install react-redux redux --save

React和Redux关联

第一步:创建更新用户信息的Action

我们现在主要做的就是初始化城市信息。
首先判断localStorage中有没有城市信息,如果有,那么我们就要更新redux中的userinfo中的cityname。
这里的action就是一个改变redux存储内容的行为,这里更新redux中的userinfo中的cityname就是我们的action。



//这是redux触发数据改变的行为,type类型要和reducer中定义的actiontype相同
//第一步:创建更新用户信息的Action
export function update(data) {
    return {
        type:'USERINFO_UPDATE',
        data
    }
}

第二步:根据action定义计算规则,即reducer



rootReducer.js是所有规则的入口,可以在这里继续添加其他规则

import {combineReducers} from 'redux'
import userinfo from './userinfo'
//这是redux的第一步定义规则,这是所有规则的入口,可以存放多个规则。
const rootReducer=combineReducers({
    userinfo:userinfo
});

export default rootReducer;


userinfo.js是我们定义的一个和用户相关的规则,内容如下:
这里的action就是第一步创建的action,通过action.type来匹配action和reducer

const initialState ={};
//这是和用户信息相关的规则,这里定义了一个更新城市名字的规则
export default function userinfo(state=initialState,action) {
    switch (action.type){
        //修改城市名字
        case 'UPDATE_CITYNAME':
            return action.data;

        default:
            return state;

    }
}

第三步:根据reducer创建store



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

//redux第二步,创建store
export default function configureStore(initialState) {

        const store = createStore(rootReducer, initialState,
            // 触发 redux-devtools
            window.devToolsExtension ? window.devToolsExtension() : undefined
        );
        return store;

}

第四步:监听数据变化

在ReactDom.render的index.jsx页面上,为自己的入口组件添加外层<provider></provider>标签。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouterMap from './routerMap';
import {Provider} from 'react-redux'
import configureStore from './store/configStore'
const store=configureStore();
ReactDOM.render(
    <Provider store={store}>
        <RouterMap/>
    </Provider>
    ,
    document.getElementById('root'));

App组件

import React from 'react';

import './App.css';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as userInfoActions from './action/userInfoActions'

class App extends React.Component {
    constructor() {
        super();
        this.state = {initDone: false};
    }

    componentDidMount() {
        // 获取位置信息
        let cityName = localStorage.cityName;
        if (cityName == null) {
            cityName = '北京';
        }
        //触发redux的修改行为
        this.props.userInfoActions.update({
            cityName: cityName
        });

        // 更改状态
        this.setState({
            initDone: true
        })
    }


//首先判断是否完成初始化
    render(){
        return (
            <div>
                {
                    this.state.initDone ? this.props.children : <div>正在加载</div>
                }

            </div>
        );
    }
}



//-------------------redux react 绑定--------------------

//当前组件如需使用redux中的共享数据,在此设置,就能够当作属性来使用
function mapStateToProps(state) {
    return {}
}

//触发数据改变
function mapDispatchToProps(dispatch) {
    return {
        userInfoActions: bindActionCreators(userInfoActions, dispatch),
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App)

在Home组件中应用这些信息
import React from 'react';
import HomeHeader from '../component/home/homeheader/HomeHeader';
import Category from '../component/home/category/Category';
import Recomment from '../component/home/recommend/Recomment';
import Likelist from '../component/home/likelist/LikeList';
import { connect } from 'react-redux';
class Home extends React.Component{
    render(){
        return(
            <div>
                <HomeHeader cityName={this.props.userinfo.cityName}/>
                <Category/>
                <Recomment/>
                <Likelist cityName={this.props.userinfo.cityName}/>
            </div>
        );
    }
}

// -------------------redux react 绑定--------------------

function mapStateToProps(state) {
    return {
        userinfo: state.userinfo
    }
}

//触发数据变化
function mapDispatchToProps(dispatch) {
    return {
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Home)


异步react-thunk插件的使用

我们希望在页面初始化的阶段,从后台根据用户的username,返回该用户所有的收藏商品id,并存储到redux中。

首先定义这个action



//更新收藏列表
export function update(data) {
    return {
        type:'STORE_UPDATE',
        data
    }
}
//在App.js中完成页初始化,从后台获取该用户的所有收藏商品id存储到redux中
//这里先fetch从后台获取json,然后触发将json更新到redux的update方法。
export function getInitStore(username) {
    return function (dispatch){
        console.log('getInitStore执行了');
        let option={method:'GET'};
        fetch(`/api/store/getStore/${username}`,option)
            .then(res => res.json())
            .then(json => dispatch(update(json)));
    };
}

之后根据action定义规则reducer



const initialState =[];
//收藏创建的规则
export default function store(state=initialState,action) {
    switch (action.type){
        //
        case 'STORE_UPDATE':
            return action.data;

        default:
            return state;

    }
}

在rootReducer中添加规则store

import {combineReducers} from 'redux'
import userinfo from './userinfo'
import store from './store'
//这是redux的第一步定义规则,这是所有规则的入口,可以存放多个规则。
const rootReducer=combineReducers({
    userinfo:userinfo,
    store:store
});

export default rootReducer;

根据reducer创建redux的存储区



需要安装redux-thunk插件

npm install redux-thunk --save

import thunkMiddleware from 'redux-thunk';
import {createStore,applyMiddleware,compose} from 'redux'
import rootReducer from '../reducer/rootReducer'

//创建store
export default function configureStore(initialState) {
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const store = createStore(rootReducer,initialState,
        composeEnhancers(applyMiddleware(thunkMiddleware)
        ));

    return store;

}

监听数据变化
在ReactDom.render的index.jsx页面上,为自己的入口组件添加外层<provider></provider>标签。
在app.js中获得redux的初始值

import React from 'react';

import './App.css';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as userInfoActions from './action/userInfoActions'
import * as storeActions from './action/storeActions';

class App extends React.Component {
    constructor() {
        super();
        this.state = {initDone: false};
    }

    componentDidMount() {
        // 获取位置信息
        let cityName = localStorage.cityName;
        if (cityName == null) {
            cityName = '北京';
        }
        //触发redux的修改行为
        this.props.userinfo.cityName=cityName;
        this.props.userInfoActions.update(this.props.userinfo);

        //获取用户名
        let username=localStorage.username;
        if(username!=null){
            //触发redux的修改行为
            this.props.userinfo.username=username;
            this.props.userInfoActions.update(this.props.userinfo);

            //触发从后台根据username获取个人收藏商品id,存储在redux中
            if(this.props.userinfo.username!=null)
                //从后台获取收藏信息,触发action
                this.props.storeActions.getInitStore(this.props.userinfo.username)
        }

        // 更改状态
        this.setState({
            initDone: true
        })
    }


//首先判断是否完成初始化
    render(){
        return (
            <div>
                {
                    this.state.initDone ? this.props.children : <div>正在加载</div>
                }

            </div>
        );
    }
}



//-------------------redux react 绑定--------------------

//当前组件如需使用redux中的共享数据,在此设置,就能够当作属性来使用
function mapStateToProps(state) {
    return {
        userinfo: state.userinfo,
        store:state.store
    }
}

//触发数据改变
function mapDispatchToProps(dispatch) {
    return {
        userInfoActions: bindActionCreators(userInfoActions, dispatch),
        storeActions: bindActionCreators(storeActions, dispatch)
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App)
精品好课
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
收藏
扫一扫关注我们