Redx Reducer 내부의 상태에 액세스하는 방법

Redx Reducer 내부의 상태에 액세스하는 방법

리듀서를 가지고 있습니다.새로운 상태를 계산하려면 액션의 데이터와 이 리듀서가 관리하지 않는 상태의 데이터가 필요합니다.에서는, 「」, 「」, 「」, 「」에 액세스 할 필요가 .accountDetails.stateOfResidenceIdsyslog.syslog.syslog.

initialState.js:

export default {
    accountDetails: {
        stateOfResidenceId: '',
        accountType: '',
        accountNumber: '',
        product: ''
    },
    forms: {
        blueprints: [

        ]
    }
};

formsReducer.js:

import * as types from '../constants/actionTypes';
import objectAssign from 'object-assign';
import initialState from './initialState';
import formsHelper from '../utils/FormsHelper';
export default function formsReducer(state = initialState.forms, action) {
  switch (action.type) {
    case types.UPDATE_PRODUCT: {
        //I NEED accountDetails.stateOfResidenceId HERE
        console.log(state);
        const formBlueprints = formsHelper.getFormsByProductId(action.product.id);
        return objectAssign({}, state, {blueprints: formBlueprints});
    }

    default:
      return state;
  }
}

index.syslog(루트 리듀서):

import { combineReducers } from 'redux';
import accountDetails from './accountDetailsReducer';
import forms from './formsReducer';

const rootReducer = combineReducers({
    accountDetails,
    forms
});

export default rootReducer;

이 필드에 접속하려면 어떻게 해야 하나요?

이 경우 thunk를 사용합니다. 예를 들어 다음과 같습니다.

export function updateProduct(product) {
  return (dispatch, getState) => {
    const { accountDetails } = getState();

    dispatch({
      type: UPDATE_PRODUCT,
      stateOfResidenceId: accountDetails.stateOfResidenceId,
      product,
    });
  };
}

기본적으로 작업에 필요한 모든 데이터를 얻은 다음 해당 데이터를 리듀서로 전송할 수 있습니다.

것에 논리를 더 쓸 요.combineReducers또는 더 많은 데이터를 액션에 포함시킵니다.에서는 이 . Redux FAQ 。

https://redux.js.org/faq/reducers/

또한, 저는 현재 Redux 문서를 위한 "Structuring Reducers"라는 주제에 대한 새로운 페이지 세트를 작업하고 있는데, 이 페이지가 도움이 될 것입니다.현재 WIP 페이지는http://https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md 에 있습니다.

이 방법이 안티패턴인지는 모르겠지만 나에게는 효과가 있었다.동작에는 큐어 기능을 사용합니다.

export const myAction = (actionData) => (dispatch, getState) => {
   dispatch({
      type: 'SOME_ACTION_TYPE',
      data: actionData,
      state: getState()
   });
}

원하는 대로 수행하는 결합 함수를 직접 작성할 수 있습니다.

import accountDetails from './accountDetailsReducer';
import forms from './formsReducer';

const rootReducer = (state, action) => {
        const newState = {};

        newState.accountDetails = accountDetails(state.accountDetails, action);
        newState.forms = forms(state.forms, action, state.accountDetails);

        return newState;
    };

export default rootReducer; 

Form Reducer는 다음과 같습니다.

export default function formsReducer(state = initialState.forms, action, accountDetails) {

이것으로 formsReducer는 accountDetails에 액세스 할 수 있게 되었습니다.

이 접근방식의 장점은 상태 전체가 아니라 필요한 상태의 슬라이스만 표시할 수 있다는 것입니다.

액션 크리에이터에게 전달해 주셨으면 합니다.따라서 다음과 같은 작업을 수행하는 액션 크리에이터가 있을 것입니다.

updateProduct(arg1, arg2, stateOfResidenceId) {
  return {
    type: UPDATE_PRODUCT,
    stateOfResidenceId
  }
}

액션을 트리거하는 장소에서 react를 사용하고 있다고 가정하면

function mapStateToProps(state, ownProps) {
  return {
    stateOfResidenceId: state.accountdetails.stateOfResidenceId
  }  
}

react-synamx의 connect를 사용하여 react component에 연결합니다.

connect(mapStateToProps)(YourReactComponent);

이제 작업 updateProduct를 트리거하는 반응 구성 요소에서 stateOfResidenceId를 소품으로 사용하여 작업 생성자에게 전달할 수 있습니다.

난해하게 들리지만, 그것은 정말로 우려의 분리에 관한 것이다.

다음을 사용할 수 있습니다.

레독스라는 이름의 요리사

이를 통해 다음과 같이 코드의 모든 위치에 상태를 가져올 수 있습니다.

const localState1 = getState(reducerA.state1)
const localState2 = getState(reducerB.state2)

그러나 액션에서 외부 상태를 payload로 전달하는 것이 더 나은지 먼저 생각해 보십시오.

또는 react-redux를 사용하여 액션이 한 곳에서만 필요한 경우 또는 HOC(High oder component, 이것이 html을 부풀릴 수 있다는 점)를 작성하는 것이 중요한 것은 액션에 전달되는 추가 파라미터와 함께 mergeprops를 사용하는 것입니다.

const mapState = ({accountDetails: {stateOfResidenceId}}) => stateOfResidenceId;

const mapDispatch = (dispatch) => ({
  pureUpdateProduct: (stateOfResidenceId) => dispatch({ type: types.UPDATE_PRODUCT, payload: stateOfResidenceId })
});

const mergeProps = (stateOfResidenceId, { pureUpdateProduct}) => ({hydratedUpdateProduct: () => pureUpdateProduct(stateOfResidenceId )});

const addHydratedUpdateProduct = connect(mapState, mapDispatch, mergeProps)

export default addHydratedUpdateProduct(ReactComponent);

export const OtherHydratedComponent = addHydratedUpdateProduct(OtherComponent)

mergeProps를 사용하면 mapState와 mapDispatch는 mergeProps의 인수를 제공하는 역할만 합니다.즉, 이 함수는 컴포넌트 소품(typescript 구문)에 이것을 추가합니다.

{hydratedUpdateProduct: () => void}

(이 함수는 실제로 액션 자체를 반환하고 무효가 되지 않지만 대부분의 경우 무시합니다).

하지만 할 수 있는 건

const mapState = ({ accountDetails }) => accountDetails;

const mapDispatch = (dispatch) => ({
  pureUpdateProduct: (stateOfResidenceId) => dispatch({ type: types.UPDATE_PRODUCT, payload: stateOfResidenceId })
  otherAction: (param) => dispatch(otherAction(param))
});

const mergeProps = ({ stateOfResidenceId, ...passAlong }, { pureUpdateProduct, ... otherActions}) => ({
  ...passAlong,
  ...otherActions,
  hydratedUpdateProduct: () => pureUpdateProduct(stateOfResidenceId ),
});

const reduxPropsIncludingHydratedAction= connect(mapState, mapDispatch, mergeProps)

export default reduxPropsIncludingHydratedAction(ReactComponent);

소품에는 다음과 같은 것이 있습니다.

{
  hydratedUpdateProduct: () => void,
  otherAction: (param) => void,
  accountType: string,
  accountNumber: string,
  product: string,
}

대체적으로 보면, redux-maintainers는 그러한 희망사항을 좋은 방법으로 포함시키기 위해 패키지의 기능을 확장하는 것을 보여주지만, 생태계의 단편화를 지원하지 않고 이러한 기능에 대한 패턴을 만드는 것은 인상적이다.

Vuex와 같이 완고하지 않은 패키지는 분실 때문에 안티파터를 남용하는 사람들이 거의 문제가 되지 않습니다.또, 레덕스나 최고의 서포트 패키지로 아카이브 할 수 있는 것보다 보일러 플레이트가 적고, 보다 깔끔한 구문을 서포트하고 있습니다.또한 패키지가 훨씬 더 다용도임에도 불구하고, 문서 주문은 레독스 문서처럼 세부 사항을 잃어버리지 않기 때문에 이해하기 쉽습니다.

에 액세스 할 수 있는 경우store그럼 다음 명령을 사용합니다.store.getState().

https://redux.js.org/api/store#getstate

액션을 디스패치하는 동안 파라미터를 전달할 수 있습니다.이 경우 합격할 수 있습니다.accountDetails.stateOfResidenceId액션을 실행한 후 payload로 리듀서에 전달합니다.

언급URL : https://stackoverflow.com/questions/39257740/how-to-access-state-inside-redux-reducer