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應用程序

回答

相關問題