React && Redux

1 简介

1.1 Redux应用场景

• 某个组件的状态，需要共享
• 某个状态需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

1.2 Redux设计思想

• Web 应用是一个状态机，视图与状态是一一对应的。
• 所有的状态，保存在一个对象里面。

2 安装

npm install redux --save

npm install react-redux --save

npm install redux-thunk --save // thunk用于实现异步事件,applyMiddleware开启(处理)中间件

3 使用

3.1 外层组件

import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import {Provider, connect} from 'react-redux'
import {counter} from './reducers'

// 创建store
const store = createStore(counter, compose(
    applyMiddleware(thunk), // thunk用于异步,applyMiddleware开启(处理)中间件
    window.devToolsExtension?window.devToolsExtension():f=>f   //调试工具
))

image

3.2 有状态值需要传递的组件内

import { connect } from 'react-redux'
import {add, remove} from "../../reducers"

image

在组件内触发action，并且传递该状态值

image

3.3 reducers.js

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 action 如何改变 state 树，需要编写 reducers。

  const ADD =  '加'
  const REMOVE = '减'
  
  export function counter(state=0,action){
    switch(action.type){
        case ADD:  //触发ADD类型的action
            return action.num; // 返回以num形式保存的key值作为状态值
        case REMOVE:
            return state-1;
        default:
            return 10

      }
  }
  // action creator
  export function add(key){ // 传递key即我们需要的状态值
    return {
      type:ADD,
      num: key 
    }
  }
  export function remove(){
    return {type:REMOVE}
  }

3.4 在需要使用该状态值的另一个组件

import { connect } from 'react-redux'

image

在组件内获取该状态值（存储在props）

image

4 区块链头像实际应用

4.1 app.js

import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import {Provider, connect} from 'react-redux'
import {reducer} from './reducers'

创建store：

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.devToolsExtension?window.devToolsExtension():f=>f
))

用Provider包裹，并传递store作为属性：

image

4.2 reducers.js

const UPDATEIMG = 'updateimg' // 定义常量

// reducer
export function reducer(state='',action){
    switch(action.type){
        case UPDATEIMG:
            console.log(action);
            return action.src
    }
}


// action creator 
export function updateimg(url){
    return {
        type: UPDATEIMG,
        src: url
    }
}

4.3 Account.js

import {connect} from 'react-redux'
import {updateimg} from '../reducers'


 .success(function(data){
    if(data.code == 200){
        self.setState({
            errorModifyMsg:'修改成功',
            showLoadingAction:false,
        })
        self.props.updateimg(self.state.imgSrc); // 调用方法
    ...




const mapStateToProps = (state) => {
    return {src:state}
}

const actionCreators = {updateimg}
#####  
export default connect(
    mapStateToProps,
    actionCreators
)(HeadLine)

4.4 HeadLine.js

import { connect } from "react-redux";

componentWillReceiveProps(nextProps){
    console.log('nextProps.src',nextProps.src);
    console.log('this.props.src',this.props.src);
    if (JSON.stringify(nextProps.src) != JSON.stringify(this.state.imgSrc) && JSON.stringify(nextProps.src)) {
        this.setState({
            imgSrc:nextProps.src
        })
    }
}


function mapStateToProps(state) {
    return {src:state}
}

export default connect(mapStateToProps)(HeadLine)