react-05-前端工事搭建-redux的使用

概览: redux 的使用

redux 的使用

参考文档: react-redux-tutorial

关于redux和flux将讲解看教程好了,下面以一个计数器为例,示例关键代码

这时的目录结构如图:

/actions 放置事件处理动作 , 起到分发器作用 , 将数据传递到reducer中
/reducers 放置对状态数据的处理 , 根据动作类型 ,改变状态数据 , 重新渲染组件
/containers 组件容器 , 状态数据和时间在这里和组件绑定映射/传递.

/index.js 应用入口 

1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import {render} from "react-dom";
import {createStore} from "redux";
import {Provider} from "react-redux";
import App from "./containers/App";
import demo from "./reducers/demo";

let store = createStore(demo);

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

/containers/App.js 组件容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, {Component, PropTypes} from "react";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import Demo from "../components/Demo/Demo";
import * as DemoActions from "../actions/demo";

class App extends Component {
    render() {
        // 有了reducers , 可以直接从props获取传递的动作和改变后的状态数据
        const {total, actions} = this.props
        return (<div>
            <div>这是外层容器,用来放置组件</div>
            <Demo total={total} actions={actions}/>
        </div>);
    }
}
App.PropTypes = {
    total: PropTypes.number.isRequired,
    actions: PropTypes.object.isRequired
};
// 定义个函数,将状态数据映射到组件的props中
function mapStateToProps(state) {
    return {
        total: state.total
    };
}
// 定义个函数,将处理事件的动作映射到组件的props中
function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(DemoActions, dispatch)
    }

}
// 连接上两个函数和组件
export default connect(mapStateToProps, mapDispatchToProps)(App);

/actions/demo.js

1
2
3
4
5
6
7
8
9
10
export function addUser() {
    return {
        type: 'addUser'
    };
}
export function deleteUser() {
    return {
        type: 'deleteUser'
    };
}

/reducers/demo.js

1
2
3
4
5
6
7
8
9
10
//功能就是在action触发后，返回一个新的state(就是个对象)
export default function addUser(state = {total: 0}, action) {
    if (action.type == 'addUser') {
        return {total: state.total + 1};
    }
    if (action.type == 'deleteUser') {
        return {total: state.total == 0 ? 0 : state.total - 1};
    }
    return {total: state.total};
}

/components/Demo/Demo.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, {Component, PropTypes} from "react";
import './style.scss'

class Demo extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        // 由容器或父组件传递下来的状态数据/动作
        const {total, actions} = this.props;
        return (
            <div className="demo">
                你是这个世界上无与伦比的美丽~
                <span>人数:{total}</span>
                <button onClick={actions.addUser}>增加</button>
                <button onClick={actions.deleteUser}>减少</button>
            </div>
        )
    }
}
// 定义组件需要的参数类型
Demo.propTyeps = {
    total: PropTypes.number.isRequired,
    actions: PropTypes.object.isRequired
}

export default Demo;

预览

ps: 我这么拷代码充内容的行为和当年写论文用代码充字数有一比.

推荐文章