redux react使用

1.在src中新建redux文件夹

2.npm下载redux和react-redux库

 

import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

使用this.props获取传人数据

 

 

render() {
    const {text, onChangeText, onButtonClick} = this.props;
    return (
        <div>
            <h1 onClick={onChangeText}> {text} </h1>
            <button onClick={onButtonClick}>click me</button>
        </div>
    );
}

3.reducer.js给action去执行的方法来修改状态

 

 

//reducer
const initialState = {
    text: 'Hello'
}
export const reducer = (state = initialState, action) => {
    switch (action.type){
        case 'CHANGE_TEXT':
            return{
                text:state.text == 'Hello' ? 'World' : 'Hello'
            }
        case 'BUTTON_CLICK':
            return{
                text: 'Hello world'
            }
        default:
            return initialState
    }
}

4.action.js关联reducer到属性

 

 

const changeTextAction = {
    type: 'CHANGE_TEXT'
}
const buttonClickAction = {
    type: 'BUTTON_CLICK'
}


//映射Redux state到组件的属性
export const mapStateToProps = (state) => {
    return {
        text: state.text
    }
}

//映射Redux actions到组件的属性
export const mapDispatchToProps = (dispatch) => {
    return{
        onButtonClick:()=>dispatch(buttonClickAction),
        onChangeTextClick:()=>dispatch(buttonClickAction),
    }
}

5.将reducer注入到属性，也可用在组件引入

 

 

let store = createStore(reducer);

render(
    <Provider store={store}>
        <Index/>
    </Provider>,
    document.getElementById('root')
);

 

 

 

完整代码

reducer.js

 

//reducer
const initialState = {
    text: 'Hello'
}
export const reducer = (state = initialState, action) => {
    switch (action.type){
        case 'CHANGE_TEXT':
            return{
                text:state.text == 'Hello' ? 'World' : 'Hello'
            }
        case 'BUTTON_CLICK':
            return{
                text: 'Hello world'
            }
        default:
            return initialState
    }
}

 

action.js

 

const changeTextAction = {
    type: 'CHANGE_TEXT'
}
const buttonClickAction = {
    type: 'BUTTON_CLICK'
}


//映射Redux state到组件的属性
export const mapStateToProps = (state) => {
    return {
        text: state.text
    }
}

//映射Redux actions到组件的属性
export const mapDispatchToProps = (dispatch) => {
    return{
        onButtonClick:()=>dispatch(buttonClickAction),
        onChangeTextClick:()=>dispatch(buttonClickAction),
    }
}

index.js(入口注入)

 

 

 

 

import React,{Component} from 'react';
import Header from '../components/header';
import '../view/authorise.less';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import {mapStateToProps, mapDispatchToProps} from '../redux/action'


class Authorise extends Component{

    constructor(props){
        super(props);
    }

    render() {
        const {text, onChangeText, onButtonClick} = this.props;
        return (
            <div>
                <h1 onClick={onChangeText}> {text} </h1>
                <button onClick={onButtonClick}>click me</button>
            </div>
        );
    }
}



//store
//let store = createStore(reducer);


//连接组件
Authorise = connect(mapStateToProps, mapDispatchToProps)(Authorise);



export default Authorise;

authorise.js（页面）

 

 

 

 

import React,{Component} from 'react';
import Header from '../components/header';
import '../view/authorise.less';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import {mapStateToProps, mapDispatchToProps} from '../redux/action'


class Authorise extends Component{

    constructor(props){
        super(props);
    }

    render() {
        const {text, onChangeText, onButtonClick} = this.props;
        return (
            <div>
                <h1 onClick={onChangeText}> {text} </h1>
                <button onClick={onButtonClick}>click me</button>
            </div>
        );
    }
}



//store
//let store = createStore(reducer);


//连接组件
Authorise = connect(mapStateToProps, mapDispatchToProps)(Authorise);



export default Authorise;

router.js（路由类似）

 

 

 

 

/**
 * 路由配置
 **/
import React from 'react';
import { Router, Route, browserHistory, hashHistory} from 'react-router';
import authorise from '../view/authorise';

const languageSwitch = (location, cb) => {
    require.ensure([], require => {
        cb(null, require('../view/languageSwitch').default)
    },'languageSwitch')
}

const RouteConfig = (
    <Router history={hashHistory}>
        <Route path="/" component={authorise} />
        <Route path="/languageSwitch" a="bbbb" getComponent={languageSwitch} />
        <Route path="*" component={authorise} />
    </Router>
);

export default RouteConfig;