sourcecode

작업 작성자의 Redx 상태에 액세스하시겠습니까?

copyscript 2022. 9. 17. 09:52
반응형

작업 작성자의 Redx 상태에 액세스하시겠습니까?

예를 들어 다음과 같습니다.

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
  }
}

그리고 그 액션 크리에이터에서 글로벌 스토어 상태(모든 리듀서)에 액세스 하고 싶다.이렇게 하는 것이 좋습니까?

import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}

또는 다음과 같습니다.

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}

State in Action 크리에이터에 액세스하는 것이 좋은 아이디어인지에 대해서는 의견이 다릅니다.

  • Redux의 크리에이터인 Dan Abramov는 다음과 같이 제한해야 한다고 생각합니다.「요청을 하기 전에 캐쉬된 데이터를 체크하거나 인증이 끝난 상태(즉, 조건부 디스패치를 실행하는 것)를 체크하기 위한 사용 사례는 거의 없습니다.저는 이런 데이터 전달이state.something.itemsaction creator는 확실히 안티패턴이며 변경 이력을 가리기 때문에 권장되지 않습니다.버그가 있는 경우 및items올바르지 않습니다.이러한 값은 액션에 대한 응답으로 리덕터에 의해 직접 계산되는 것이 아니라 이미 액션의 일부이기 때문에 어디에서 유래한 값을 추적하는 것은 어렵습니다.그러니 주의해서 하세요.
  • 현재 Redux의 관리자인 Mark Ericson은 이것이 괜찮다고 말하며 심지어 thunks에서 사용하기를 권장한다. 그것이 존재하는 이유이다.그는 Idiomatic Redux: Thunks, Sagas, Abstraction, Reusability라는 블로그 포스트에서 액션 크리에이터에 접근하는 것의 장단점에 대해 논의합니다.

이것이 필요하다고 생각되는 경우는, 어느 쪽의 어프로치라도 상관없습니다.첫 번째 접근법에는 미들웨어가 필요하지 않습니다.

import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}

단, 이 기능은 다음 항목에 의존하고 있음을 알 수명은store일부 모듈에서 내보낸 싱글톤입니다.서버 렌더링을 앱에 추가하는 것이 훨씬 어렵기 때문에 권장하지 않습니다. 왜냐하면 대부분의 경우 서버에는 요청당 개별 스토어가 필요하기 때문입니다.따라서 기술적으로 이 방법은 작동하지만 모듈에서 저장소를 내보내는 것은 권장하지 않습니다.

이것이 바로 두 번째 접근방식을 권장하는 이유는 다음과 같습니다.

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}

Redx Thunk 미들웨어를 사용해야 하지만 클라이언트와 서버 모두에서 정상적으로 작동합니다.Redux Thunk에 대한 자세한 내용과 이 경우에 필요한 이유는 여기를 참조하십시오.

이상적으로는 당신의 행동은 "뚱뚱한" 것이 아니라 가능한 한 적은 정보를 포함해야 하지만, 당신은 자신의 어플리케이션에서 당신에게 가장 적합한 것을 자유롭게 할 수 있어야 합니다.Redux FAQ에는 작업 작성자와 환원자 간에 논리를 분할하는 방법과 작업 작성자에서 사용하는 데 유용한 시간에 대한 정보가 나와 있습니다.

시나리오가 간단한 경우

import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}

하지만 가끔 당신의action creator

이므로 "" " " " " 가 필요합니다.REQUEST_LOAD REQUEST_LOAD_SUCCESS REQUEST_LOAD_FAIL

export const [REQUEST_LOAD, REQUEST_LOAD_SUCCESS, REQUEST_LOAD_FAIL] = [`REQUEST_LOAD`
    `REQUEST_LOAD_SUCCESS`
    `REQUEST_LOAD_FAIL`
]
export function someAction() {
    return (dispatch, getState) => {
        const {
            items
        } = getState().otherReducer;
        dispatch({
            type: REQUEST_LOAD,
            loading: true
        });
        $.ajax('url', {
            success: (data) => {
                dispatch({
                    type: REQUEST_LOAD_SUCCESS,
                    loading: false,
                    data: data
                });
            },
            error: (error) => {
                dispatch({
                    type: REQUEST_LOAD_FAIL,
                    loading: false,
                    error: error
                });
            }
        })
    }
}

주의: 함수를 액션 크리에이터로 되돌리려면 redux-thunk가 필요합니다.

나는 @Bloomca에 동의한다.스토어에서 필요한 값을 인수로 디스패치 함수에 전달하는 것은 스토어를 내보내는 것보다 간단해 보입니다.여기서 예를 들어 보겠습니다.

import React from "react";
import {connect} from "react-redux";
import * as actions from '../actions';

class App extends React.Component {

  handleClick(){
    const data = this.props.someStateObject.data;
    this.props.someDispatchFunction(data);
  }

  render(){
    return (
      <div>       
      <div onClick={ this.handleClick.bind(this)}>Click Me!</div>      
      </div>
    );
  }
}


const mapStateToProps = (state) => {
  return { someStateObject: state.someStateObject };
};

const mapDispatchToProps = (dispatch) => {
  return {
    someDispatchFunction:(data) => { dispatch(actions.someDispatchFunction(data))},

  };
}


export default connect(mapStateToProps, mapDispatchToProps)(App);

스토어에서 읽는 것도 나쁘지 않다는 것을 지적하고 싶습니다.모든 것을 컴포넌트에 전달하고 나서 기능의 파라미터로 하는 것보다 스토어에 근거해 무엇을 할지를 결정하는 것이 훨씬 편리할지도 모릅니다.Dan의 의견에 전적으로 동의합니다.단, 클라이언트 측 렌더링에만 사용할지 100% 확신할 수 없는 한 스토어를 싱글톤으로 사용하지 않는 것이 좋습니다(그렇지 않으면 추적하기 어려운 버그가 발생할 수 있습니다).

저는 최근 redex의 장황함에 대처하기 위해 라이브러리를 만들었습니다만, 미들웨어에 모든 것을 넣는 것이 좋다고 생각하기 때문에, 모든 것을 의존성 주입으로 하고 있습니다.

예를 들어 다음과 같습니다.

import { createSyncTile } from 'redux-tiles';

const someTile = createSyncTile({
  type: ['some', 'tile'],
  fn: ({ params, selectors, getState }) => {
    return {
      data: params.data,
      items: selectors.another.tile(getState())
    };
  },
});

다만, 여기에서는 실제로 데이터를 수정하지 않기 때문에, 이 셀렉터를 다른 장소에서 조합하는 것만으로 충분합니다.

이 문제를 해결할 다른 방법을 제시합니다.어플리케이션에 따라서는 Dan의 솔루션보다 좋을 수도 있고 나쁠 수도 있습니다.

액션을 2개의 다른 기능(첫 번째 데이터 요청, 두 번째 데이터 실행)으로 분할하여 환원기에서 액션으로 상태를 가져올 수 있습니다.이를 수행하려면 를 사용합니다.

첫 번째 '데이터를 부탁한다'

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
    return {
        type: SOME_ACTION,
    }
}

한다.redux-loop.

import { loop, Cmd } from 'redux-loop';
const initialState = { data: '' }
export default (state=initialState, action) => {
    switch(action.type) {
        case SOME_ACTION: {
            return loop(state, Cmd.action(anotherAction(state.data))
        }
    }
}

데이터를 수중에 넣어, 처음에 하고 싶었던 것을 모두 실행할 수 있습니다.

export const ANOTHER_ACTION = 'ANOTHER_ACTION';
export function anotherAction(data) {
    return {
        type: ANOTHER_ACTION,
        payload: data,
    }
}

이게 도움이 됐으면 좋겠네요.

파티에 늦었다는 건 알지만 국가를 행동으로 옮기고 싶다는 의견을 구하러 왔다가 내가 생각하는 올바른 행동이라는 걸 깨달았을 때 내 생각을 형성했다.

여기서 셀렉터가 가장 말이 되는군이 요청을 발행하는 컴포넌트에는 선택을 통해 발행할 때가 되었음을 알려야 합니다. 

export const SOME_ACTION = 'SOME_ACTION';
export function someAction(items) {
  return (dispatch) => {
    dispatch(anotherAction(items));
  }
}

추상화가 누출된 것처럼 느껴질 수 있지만 컴포넌트는 메시지를 전송해야 하며 메시지 페이로드에는 관련 상태가 포함되어 있어야 합니다.유감스럽게도 당신의 질문에는 구체적인 예가 없습니다.왜냐하면 우리는 셀렉터 및 액션의 '더 나은 모델'을 통해 작업할 수 있기 때문입니다.

저는 제가 가장 깨끗하다고 생각하는 다른 대안을 제안하고 싶습니다만, 그 대안은react-redux또는 시뮬레이션 같은 것을 사용하고 있습니다.또, 그 사이에, 몇개의 다른 화려한 기능을 사용하고 있습니다.

// actions.js
export const someAction = (items) => ({
    type: 'SOME_ACTION',
    payload: {items},
});

// Component.jsx
import {connect} from "react-redux";

const Component = ({boundSomeAction}) => (<div
    onClick={boundSomeAction}
/>);

const mapState = ({otherReducer: {items}}) => ({
    items,
});

const mapDispatch = (dispatch) => bindActionCreators({
    someAction,
}, dispatch);

const mergeProps = (mappedState, mappedDispatches) => {
    // you can only use what gets returned here, so you dont have access to `items` and 
    // `someAction` anymore
    return {
        boundSomeAction: () => mappedDispatches.someAction(mappedState.items),
    }
});

export const ConnectedComponent = connect(mapState, mapDispatch, mergeProps)(Component);

// (with  other mapped state or dispatches) Component.jsx
import {connect} from "react-redux";

const Component = ({boundSomeAction, otherAction, otherMappedState}) => (<div
    onClick={boundSomeAction}
    onSomeOtherEvent={otherAction}
>
    {JSON.stringify(otherMappedState)}
</div>);

const mapState = ({otherReducer: {items}, otherMappedState}) => ({
    items,
    otherMappedState,
});

const mapDispatch = (dispatch) => bindActionCreators({
    someAction,
    otherAction,
}, dispatch);

const mergeProps = (mappedState, mappedDispatches) => {
    const {items, ...remainingMappedState} = mappedState;
    const {someAction, ...remainingMappedDispatch} = mappedDispatch;
    // you can only use what gets returned here, so you dont have access to `items` and 
    // `someAction` anymore
    return {
        boundSomeAction: () => someAction(items),
        ...remainingMappedState,
        ...remainingMappedDispatch,
    }
});

export const ConnectedComponent = connect(mapState, mapDispatch, mergeProps)(Component);

인 것을 mapState,mapDispatch ★★★★★★★★★★★★★★★★★」mergeProps다른 곳에서 재사용할 수 있도록 함수로 전환합니다. 하지만 이 경우 의존성이 완전히 명확해집니다.

액션 크리에이터를 사용하여 mapStateToProps())을 .import * from './reducers';컴포넌트 내)를 참조해 주세요.그런 다음 구성 요소 파괴 기능을 사용하여 주정부 제안에서 필요한 모든 기능을 사용합니다.Action Creator의 TYPE은 Reducer의 Reducer입니다. Reducer는 현재 상태로 설정된 모든 항목에 액세스할 수 있기 때문입니다.이 예에서는 아무것도 갱신하고 있지 않습니다.액션 크리에이터

리듀서에서 다음과 같은 작업을 수행합니다.

const state = this.state;
const apple = this.state.apples;

참조하고 있는 TYPE의 상태에서의 액션을 실행할 필요가 있는 경우는, 리덕터에서 실행해 주세요.

틀렸으면 정정해주세요!!!

언급URL : https://stackoverflow.com/questions/35667249/accessing-redux-state-in-an-action-creator

반응형

'sourcecode' 카테고리의 다른 글

속도 향상 인텔리J-Idea  (0) 2022.09.17
Java에서 대소문자를 구분하지 않는 리터럴 서브스트링을 교체하는 방법  (0) 2022.09.17
MySQL "ERROR 1005 (HY000)" :'foo' 테이블을 만들 수 없습니다.#sql-12c_4' (오류번호: 150)  (0) 2022.09.17
Java 또는 C#에서의 예외 관리 베스트 프랙티스  (0) 2022.09.17
UNIX 소켓 파일용 mysqld_safe 디렉토리 '/var/run/mysqld'가 없습니다.  (0) 2022.09.17

'sourcecode'의 다른글

  • 현재글작업 작성자의 Redx 상태에 액세스하시겠습니까?

관련글

댓글

티스토리툴바