Как следует структурировать/передать свои данные или действия в Redux

Question

Я преобразуя свою defaultState (весь мой редуктор), как это прямо сейчас:

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]; 

Очевидно, что это все личные предпочтения, но в разделе выше вас сейчас обнажая явный контракт необходимых полей, которые, как ожидается, действием, не читая действия.