react Redux使用教程

redux

状态管理

• 安装 npm install redux

• 核心：

• Action 操作 store

• Reducer 一个函数

• store 数据

• 缺点：需要将store一层一层传递

加减Demo:

let num = 0
export default function counter(state = num, action) {
    if (action.type == 'ADD') {
        return state + 1
    }
    else if (action.type == 'DEL') {
        return state - 1
    }
    else {
        return state
    }
}

createStore 创建数据源 :

创建后有四个方法：

• dispatch: ƒ dispatch(action) 函数方法调用 ，默认同步

• subscribe: ƒ subscribe(listener) 代替setState 渲染数据

• getState: ƒ getState() 获取状态数据

• replaceReducer: ƒ replaceReducer(nextReducer) 更换数据源

加减完整Demo:

新建一个testredux.js:

let num = 0
export default function counter(state = num, action) {
    if (action.type == 'ADD') {
        return state + 1
    }
    else if (action.type == 'DEL') {
        return state - 1
    }
    else {
        return state
    }
}

新建一个testreduxweb.js：

import React, { Component } from 'react';
import { createStore } from 'redux'
import counter from './testredux'
let store=createStore(counter) //只能有一个
class Testreduxweb extends Component {
    constructor(props) {
        super(props);
    }
     add() {
        store.dispatch({ type: 'ADD' })
     }
     del() {
         store.dispatch({ type: 'DEL' })
     }
    render() {
        return (
                <div>
                    <input type='button' value='+' onClick={this.add.bind(this)} />
                    <span>{store.getState()}</span>
                    <input type='button' value='-' onClick={this.del.bind(this)} />
                </div> 
        )
    }
}
export {Testreduxweb,store}

按钮执行但是发现没有页面渲染，通过subscribe，index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import {Testreduxweb,store} from './App';
import * as serviceWorker from './serviceWorker';
function render() {
    ReactDOM.render(<Testreduxweb />, document.getElementById('root'));
}
render()
store.subscribe(render)
serviceWorker.unregister();

​

工程化

将action.type dispacth执行方法 reducer合并方式 区分

新建reducer文件 用于存放对应数据进行更改 对应需要使用的方法：addReducer.js reduceRducer.js index.js（合并前面两个文件）

addReducer.js

import * as TYPES from '../actionType'
const data = {
    num: 0
}
export default function addReducer(state = data, action) {
    state = JSON.parse(JSON.stringify(state))
    switch (action.type) {
        case TYPES.ADDCHANGE:
            state.num++;
            break
    }
    return state
}

reduceRducer.js

import * as TYPES from './actionType'
const data = {
    num: 0
}
export default function reduceReducer(state = data, action) {
    state = JSON.parse(JSON.stringify(stae))
    switch (action.type) {
        case TYPES.REDUCECHANGE:
            state.num--;
            break
    }
    return state
}
index.js 

合并两个文件方法 combineReducers

import reduceReducer from "./addReducer";
import addReducer from "./addReducer";
import { combineReducers } from 'redux';
export default combineReducers({
    reduceReducer: reduceReducer,
    addReducer: addReducer,
})

新建actionType.js 文件用于dispatch({type:'xx'})对用需要的key

/*统一标识符*/
export const ADDCHANGE = 'ADDCHANGE'
export const REDUCECHANGE = 'REDUCECHANGE'

新建action文件 用于dispatch() 对应需要使用的方法：addAction.js reduceAction.js index.js（合并前面两个文件）

addAction.js

import * as TYPES from '../actionType'
export default {
    changeAdd() {
        return {
            type: TYPES.ADDCHANGE
        }
    }
}

reduceAction.js

import * as TYPES from '../actionType'
export default {
    changeAdd() {
        return {
            type: TYPES.REDUCECHANGE
        }
    }
}

index.js 合并两个文件方法

import addAction from "./addAction";
import reduceAction from "./reduceAction";
export default {
    addAction: addAction,
    reduceAction: reduceAction,
}

新建index.js 统一redux管理 使用的store

import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store

新建需要的父组件进行将store传入，用于子组件使用

import React from 'react';  
import ReduxUse from "./reduxUse";
class App extends Component {
  render() {
    return (
      <div>
        <ReduxUse store={store} />
      </div >
    );
  }
}
export default App;

对应子组件执行方法，更改redux store初始化的值渲染父组件对应的内容

import React from 'react'
import action from '../redux/store/action'
export default class ReduxUse extends React.Component {
    constructor(props) {
        super(props)
        let { num } = props.store.getState().addReducer
        this.state = {
            num: num
        }
    }
    componentDidMount() {
        this.props.store.subscribe(() => {
            this.setState({
                num: this.props.store.getState().addReducer.num
            })
        })
    }
    render() {
        let store = this.props.store
        return (
            <div>
                <button  >执行redux</button>
                {this.state.num}
                <ReduxUse2 store={store} />
            </div>
        )
    }
}
class ReduxUse2 extends React.Component {
    render() {
        let store = this.props.store
        return (
            <div>
                <button onClick={() => { store.dispatch(action.addAction.changeAdd()) }}>加</button>
            </div>
        )
    }
}

---

react-redux 主要分为 ：

下载 npm install react-redux

• Provider store 只能创建一个，如果多个组件需要用到只能一层一层传递 Provider 可以将store全局传递

• connect 将store和组件联系在一起，变成私有状态 （高阶函数）不需要在使用subscribe

• 针对react-redux 是在redux基础上进行封装

Provider 使用 代码index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore } from 'redux'
import { Provider } from 'react-redux';
import counter from './testredux'
let store = createStore(counter) 
function render() {
    ReactDOM.render(<Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));
}
render()
store.subscribe(render)
serviceWorker.unregister();

使用 connect 使用：

import React, { Component } from 'react';
import { Provider, connect } from 'react-redux';
class Testreduxweb extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { num, add, del } = this.props;
        console.log(this.props)
        return (
                {/* connect测试redux */}
                <div>
                    <input type='button' value='+' onClick={add} />
                    <span>{num}</span>
                    <input type='button' value='-' onClick={del} />
                </div>
        )
    }
}
 function mapStateToProps(state) {
     console.log(state)
     return { num: state }
 }
 //映射Redux actions到组件的属性
 function mapDispatchToProps(dispatch) {
     return {
        add: () => dispatch({ type: 'ADD' }),
        del: () => dispatch({ type: 'DEL' })
     }
 }
//连接组件
export default connect(mapStateToProps, mapDispatchToProps)(Testreduxweb)

applyMiddleware 中间件，在action.type匹配时候可做一些操作：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import newreducer from './combine'
let store = createStore(newreducer, applyMiddleware(connext))
function connext(getState) {
    return (dispatch) => {
        return (action) => {
            if (action.type == 'ADD') {
                dispatch(action)
            } else {
                alert('不执行')
            }
        }
    }
}
function render() {
    ReactDOM.render(<Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));
}
render()
store.subscribe(render)
serviceWorker.unregister();

thunk 变为异步:

下载npm install redux-thunk

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'
import newreducer from './combine'
let store = createStore(newreducer, applyMiddleware(thunk, connext))
function connext(getState) {
    return (dispatch) => {
        return (action) => {
            if (action.type == 'ADD') {
                dispatch(action)
            } else {
                alert('不执行')
            }
        }
    }
}
function render() {
    ReactDOM.render(<Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));
}
render()
store.subscribe(render)
serviceWorker.unregister();
​