Building React/Redux应用程序

使用redux制作单页应用程序并做出反应，首先要做什么？使用redux首先创建我的状态的逻辑，或者让所有组件首先作出反应？Building React/Redux应用程序

2016-02-28 MeetMahPuppy

可能首先要做的是建立你的减速器功能。这里是一个例子。我使用ES6的例子。

const INCREMENT = 'redux-example/counter/INCREMENT'; 

const initialState = { 
    count: 0 
}; 

export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 
    case INCREMENT: 
     const {count} = state; 
     return { 
     count: count + 1 
     }; 
    default: 
     return state; 
    } 
} 

export function increment() { 
    return { 
    type: INCREMENT 
    }; 
}

然后，你必须创建一个组件：

import React, {Component, PropTypes} from 'react'; 
import {connectMultireducer} from 'multireducer'; 
import {increment} from 'redux/modules/counter'; 

@connectMultireducer(
    (key, state) => ({count: state.multireducer[key].count}), 
    {increment} 
) 
export default class CounterButton extends Component { 
    static propTypes = { 
    count: PropTypes.number, 
    increment: PropTypes.func.isRequired, 
    className: PropTypes.string 
    } 

    props = { 
    className: '' 
    } 

    render() { 
    const {count, increment} = this.props; // eslint-disable-line no-shadow 
    let {className} = this.props; 
    className += ' btn btn-default'; 
    return (
     <button className={className} onClick={increment}> 
     You have clicked me {count} time{count === 1 ? '' : 's'}. 
     </button> 
    ); 
    } 
}

在你的组件，你会减速状态和动作连接到您的组件，然后将它们包装成一个容器，并将其链接到HTML。

希望这会有所帮助。

来源

2016-02-28 04:58:05

嗨，我一直在学习与es2015，和@（运营商？）有点新的面貌给我，请解释一下？ – MeetMahPuppy

@是装饰器，它可以让你编写更少的代码来完成redux连接。这里有一个链接来更详细地解释它。 http://stackoverflow.com/questions/32646920/whats-in-the-redux-connect-decorator –

我认为这在很大程度上取决于您是否更好地理解数据或更好地了解您的UI。我会写出一个容器组件，并将所有数据作为状态传递给它，然后将其映射到道具。从那里你可以决定哪些组件需要状态树的哪一部分。然后，您可以通过跟踪数据来了解推理组件设计。

这里有一个简单的例子，我勾勒出：https://github.com/matthewkturner/redux-simple-boilerplate

来源

2016-02-28 08:11:31

嗯，我认为理解用户界面更好。然后，您可以在之后理解数据。虽然这只是我的看法，因为我只是一个纯粹的前端开发人员，对后端知之甚少（php） – MeetMahPuppy

对于一个职业的立场（没有人会认为不赞成），他们通常做什么？我无法找到一个很好的教程/例子来说明两者。 – MeetMahPuppy

你会犯错误先做所有组件或所有州第一。

只需从1个组件开始并将其挂接到redux。不要编写不需要的状态或组件。

更好地从必要的代码开始，如果需要更改，修改/重构该代码。

当你有一个假设是不正确的，并且事实证明你必须重写你预先写好的组件时，预优化是痛苦的。在项目过程中，您总是会找到更好的方法来处理事情，因此当时您拥有的组件和/或减少器的数量就会越多。

来源

2016-02-28 15:06:53 SpoBo

Building React/Redux应用程序

回答

相关问题