툰크 또는 콜백 함수를 리 덕스 액션에 전달하는 방법. 모달 및 토스트 확인 알림을위한 redux 저장소의 함수 직렬화

Question

확인 단추가있는 일반 모달 또는 토스트를 사용하면이 구성 요소에 작업을 전달하여 확인을 클릭 할 때 디스패치 할 수있는 것이 유용합니다.

동작은 다음과 같이 보일 수 있습니다 : modalConfirm 같은 다른 액션 객체입니다

export function showConfirm({modalConfirm}) { 
    return { 
    type: 'MODALS/SHOW_MODAL', 
    payload: { 
     modalId: getUuid(), 
     modalType: 'CONFIRM', 
     modalConfirm : modalConfirm, 
    }, 
    }; 
} 

:

modalConfirm 작업이 dispatch(modalConfirm) 또는 dispatch(Object.assign({}, modalConfirm, someResultFromTheModal)

를 사용하여 모달 구성 요소 내부에 전달되는

const modalConfirm = { 
    type: 'MAKE_SOME_CHANGES_AFTER_CONFIRM', 
    payload: {} 
} 

유감스럽게도이 솔루션은인 경우에만 작동합니다.은 간단한 redux 액션 객체입니다. 이 시스템은 분명히 매우 제한적입니다. 어쨌든 단순한 객체 대신 펑크와 같은 함수를 전달할 수 있습니까?

이상적으로, 뭔가 완전한 기능을 갖춘 좋아하는이 :

const modalConfirm = (someResultFromTheModal) => { 
     return (dispatch, getState){ 
     dispatch({ 
      type: 'MAKE_SOME_UPDATES', 
      payload: someResultFromTheModal 
     }) 
     dispatch({ 
      type: 'SAVE_SOME_STUFF', 
      payload: http({ 
      method: 'POST', 
      url: 'api/v1/save', 
      data: getState().stuffToSave 
      }) 
     }) 
     } 
    } 

Answer 1

문자열 별칭을 사용하여 작업을 중앙에서 등록하는 작업 라이브러리에 연결했습니다.

는

모달 emmiter 조치가 functionAlias 및 functionInputs을 가진 개체를 포함

export function confirmDeleteProject({projectId}) { 
    return ModalActions.showConfirm({ 
    message: 'Deleting a project it permanent. You will not be able to undo this.', 
    modalConfirm: { 
     functionAlias: 'ProjectActions.deleteProject', 
     functionInputs: { projectId } 
    } 
    }) 
} 

'ProjectActions.deleteProject은'같은 복잡한 행동의 어떤 유형에 대한 별칭입니다

:

export function deleteProject({projectId}) { 
    return (dispatch)=>{ 
    dispatch({ 
     type: 'PROJECTS/DELETE_PROJECT', 
     payload: http({ 
     method: 'DELETE', 
     url: `http://localhost:3000/api/v1/projects/${projectId}`, 
     }).then((response)=>{ 
     dispatch(push(`/`)) 
     }), 
     meta: { 
     projectId 
     } 
    }); 
    } 
} 

기능은 등록 다음과 같이 라이브러리 모듈에서 :

import * as ProjectActions from '../../actions/projects.js'; 

const library = { 
    ProjectActions: ProjectActions, 
} 

export const addModule = (moduleName, functions) => { 
    library[moduleName] = functions 
} 

export const getFunction = (path) => { 
    const [moduleName, functionName] = path.split('.'); 

    // We are getting the module only 
    if(!functionName){ 
    if(library[moduleName]){ 
     return library[moduleName] 
    } 
    else{ 
     console.error(`Module: ${moduleName} could not be found.`); 
    } 
    } 
    // We are getting a function 
    else{ 
    if(library[moduleName] && library[moduleName][functionName]){ 
     return library[moduleName][functionName] 
    } 
    else{ 
     console.error(`Function: ${moduleName}.${functionName} could not be found.`); 
    } 
    } 
} 

modalConfirm 개체가 소품에 의해 모달로 전달됩니다. 모달 구성 요소는 위 모듈에서 getFunction 함수가 필요합니다. 당신이 볼 수 있듯이,이 함수는 모달에서 입력에 걸릴 수

const modalConfirmFunction = (extendObject, modalConfirm) => { 
    const functionFromAlias = getFunction(modalConfirm.functionAlias); 
    if(functionFromAlias){ 
    dispatch(functionFromAlias(Object.assign({}, modalConfirm.functionInputs, extendObject))); 
    } 
} 

다음과 같이 modalConfirm 객체는 함수로 변환됩니다. 모든 유형의 복잡한 동작이나 썽크를 실행할 수 있습니다.이 시스템은 시간 여행을 해치지 않지만 중앙 집중식 라이브러리는 약간의 단점이 있습니다.

Answer 2

재미, 가게에서 액션 객체를 넣고 일반적인 대화에 소품으로 전달이 정확히 나 자신 해낸 방법입니다. 나는 실제로 그 아이디어를 설명하는 게시되기를 기다리고있는 블로그 게시물을 가지고있다.

질문에 대한 답변은 "예, 이지만 ...."입니다. Redux FAQ http://redux.js.org/docs/FAQ.html#organizing-state-non-serializable에 따라 함수와 같은 직렬화 할 수없는 값을 액션과 상점에 넣는 것은 전적으로 가능합니다. 그러나 일반적으로 시간 이동 디버깅이 예상대로 작동하지 않습니다. 그게 너에게 관심이 없다면, 바로 가라.

다른 옵션은 모달 확인을 두 부분으로 나누는 것입니다. 초기 모달 확인은 여전히 ​​일반 액션 객체이지만 미들웨어를 사용하여 파견중인 것을 확인하고 거기에서 추가 작업을 수행하십시오. 이것은 Redux-Saga의 좋은 사용 사례입니다.