はどのような構造/私は今、この権利のように（私の全体の減速）私のdefaultStateを変換していますReduxの

Question

に私のデータやアクションを渡す必要があります。

import _ from 'lodash'; 

import { SIGN_UP_STEP, RESET_SIGN_UP } from '../actions/sign-up'; 

const defaultState = { 
    ui: { 
    loading: false 
    }, metadata: { 
    step: 1, 
    code: null 
    }, 
    data: { 
    name: null, 
    email: null, 
    password: null, 
    number: null, 
    access_token: null 
    } 
} 

export default function signUpReducer(state = defaultState, action) { 
    switch(action.type) { 
    case SIGN_UP_STEP: 
    return _.merge({}, state, action.data) 
    case RESET_SIGN_UP: 
    return defaultState; 
    default: 
    return state; 
    } 
} 

と自分の行動を今この

import request from 'axios'; 
import _ from 'lodash'; 

const BACKEND_ROOT = process.env.API_ROOT || 'http://localhost:3000'; 

export const SIGN_UP_STEP = 'SIGN_UP_STEP'; 
export const RESET_SIGN_UP = 'RESET_SIGN_UP'; 

export function signUpStep(data) { 
    return { 
    type: SIGN_UP_STEP, 
    data 
    } 
} 

... 

のように

しかし、今私はどのように構造化すべきか、どうやってこれをやるべきか考えています。私がコンポーネントからアクションに、またはアクションからレデューサーにフォーマットを送信する必要がある場合。

// component 
const signUpAction = SignUpActions.signUpStep({ 
    step: 2, 
    name: this.refs.name.value, 
    email: this.refs.email.value, 
    password: this.refs.password.value 
}); 
dispatch(signUpAction); 

// action 
export function signUpStep(data) { 
    return { 
    type: SIGN_UP_STEP, 
    { 
     metadata: { 
     step: data.step 
     }, 
     data: data.data 
    } 
    } 
} 

か、それを送信する前に、まずそれをフォーマット：

などが、私はこのようにそれを行う必要がありますか？

// component 
const signUpAction = SignUpActions.signUpStep({ 
    metadata: { 
    step: 2, 
    }, 
    data: { 
    name: this.refs.name.value, 
    email: this.refs.email.value, 
    password: this.refs.password.value 
    } 
}); 
dispatch(signUpAction); 

// action 
export function signUpStep(data) { 
    return { 
    type: SIGN_UP_STEP, 
    data 
    } 
} 

Answer 1

私はコメントに@Kaiに同意しますが、私はそれをやや詳しく取るために、私は契約を示す行動を好みます。

export function signUpStep(name, email, password, ...args){ 
    return { type: SIGN_UP_STEP, 
    metadata: { 
     step: 2 
    }, 
    data: {name, email, password, ..args} 
    } 
} 

// to call 
signUpStep("John", "john@example.com", "Pass1", "doej"); 

// to access "doej" parameter from function 
const githubId = args[0]; 

明らかにこれは、すべての個人的な好みですが、上記のセクションでは、今行動を読まずにアクションが期待されている必要なフィールドの明示的な契約をさらしています。