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去执行的方法来修改状态

//reducerconst 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

//reducerconst 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;