Redux, 데이터에 액세스하려면 모든 컨테이너에 있는 스토어를 가져와야 합니까?

Redux, 데이터에 액세스하려면 모든 컨테이너에 있는 스토어를 가져와야 합니까?

redex에 대해 잘 알고 있는 것은 아닐지도 모르지만, 지금까지 본 예는 모두 컨테이너간의 액세스 상태가 그다지 좋지 않기 때문에, store.getState()의 사용 상황은 별로 볼 수 없었습니다만, 디스패치 하고 싶어도 스토어에 액세스 할 필요가 있는 것이 맞습니까?

따라서 'path/to/store/store'에서 가져오기 스토어를 가져오는 것 외에

getState() 또는 "dispatch"를 원하는 모든 파일에서 해당 상태를 포함하지 않으면 저장소가 정의되지 않기 때문에 해당 상태에 액세스하려면 어떻게 해야 합니까?

일반적으로 스토어에 액세스할 수 있는 최상위 수준의 컨테이너 구성 요소만 만들고자 합니다. 필요한 데이터나 작업 디스패치는 하위 구성 요소에 소품으로 전달됩니다.이것이 '스마트' 컴포넌트와 '덤' 컴포넌트의 차이입니다.즉, '스마트' 컴포넌트는 Redux 스토어/스테이트에 대해 알고 있는 반면, '덤' 컴포넌트는 소품만 전달받았을 뿐 더 큰 애플리케이션 상태에 대해서는 모릅니다.

그러나 저장 공간을 용기 구성요소로 전달하는 것조차 지루할 수 있습니다.따라서 React-Redux는 애플리케이션 전체를 포괄하는 하나의 컴포넌트를 즉시 제공합니다.의사한테 확인해봐이거는Provider컴포넌트와 함께 전체 앱을 랩하면 스토어를 컴포넌트에 한 번만 전달합니다.

import createStore from '../store';

const store = createStore()

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <MainAppContainer />
      </Provider>
    )
  }
}

여기 보시는 것처럼 스토어 전용의 설정 파일은 따로 준비되어 있습니다.변경할 수 있는 것은 매우 많기 때문입니다.또, 리모트·컴플렉스·애플리케이션의 경우는, 미들·웨어를 적용하기 위해서 컴포트를 사용하는 등, 같은 조작을 실시할 수 있습니다.

그 후, 나머지 「스마트」컴포넌트(일반적으로 랩퍼)는, 스토어의 소리에 귀를 기울일 필요가 있습니다.이것은 connect 방식을 사용하여 이루어집니다.이를 통해 상태 조각을 컴포넌트 속성과 디스패치 액션을 속성으로 매핑할 수 있습니다.

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from './actionCreators';

const mapStateToProps = function(state){
  return {
    something: state.something,
  }
}

const mapDispatchToProps = function (dispatch) {
  return bindActionCreators({
    getSomething: actionCreators.getSomething,
  }, dispatch)
}

class MainAppContainer extends Component {

    componentDidMount() {
      //now has access to data like this.props.something, which is from store
      //now has access to dispatch actions like this.props.getSomething
    }

    render() {
        //will pass down store data and dispatch actions to child components
        return (
               <div>
                   <ChildComponent1 something={this.props.something} />
                   <ChildComponent2 getSomething={this.props.getSomething} />
               </div>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MainAppContainer)

을 참조하기만 .this.props.

를 들어 가 '어울릴 수 없다', '어울릴 수 없다'에알수 있습니다.this.props.something로.ChildComponent1, 에 액세스 할 수 있습니다.something저장소의 데이터에 액세스 할 수 없습니다.getSomething디스패치 액션저도 마찬가지예요.ChildComponent2에 액세스 할 수 있는 것은,getSomething디스패치 액션을 실행하지만something즉, 저장소에서 필요한 구성 요소에만 노출됩니다.

예를 들면ChildComponent2디스패치 액션이 전달되었습니다.getSomething, 나의 경우onClick전화할 수 있다this.props.getSomething스토어에 접속할 필요 없이 디스패치 액션을 호출합니다.같은 방법으로 계속 전해질 수 있습니다.getSomething다른 자 컴포넌트로 전송하면 해당 컴포넌트가 호출 및/또는 전달하여 사이클이 무기한 지속될 수 있습니다.

class ChildComponent2 extends Component {

    render() {
        return (
            <div>
                <div onClick={this.props.getSomething}>Click me</div>
                <NestedComponent getSomething={this.props.getSomething} />
            </div>
        )
    }
}

코멘트에서 편집

질문과는 직접 관계가 없지만, 코멘트에서 당신은 행동에 대해 약간 혼란스러워 보였어요.실제로 액션을 정의하지 않았습니다.getSomething대신 Redx 앱에서는 작업 정의를 모두 별도의 파일에 저장하는 것이 일반적입니다.actionCreators.js여기에는 액션과 동일한 이름의 함수가 포함되어 있습니다.이 함수는 오브젝트를 반환하고 있습니다.type속성 및 작업에 필요한 기타 메서드/데이터.예를 들어, 여기 아주 간단한 예가 있습니다.actionCreators.js파일:

export function getSomething() {
    return {
        type: 'GET_SOMETHING',
        payload: {
            something: 'Here is some data'
        }
    }
}

이 액션 유형은 리듀서가 어떤 액션이 실행되고 있는지 확인하기 위해 수신하는 것입니다.

를 사용하는 경우react-redux컴포넌트를 포장할 수 있습니다.Provider와 함께store이렇게 하면 React 컨텍스트에 단일 저장소가 설정되며, 이 저장소는 다음에서 액세스됩니다.connect메서드를 지정합니다.그connectmethod는 스토어에서 상태를 가져오고 메시지를 발송하기 위한 후크인 두 가지 함수(mapStateToProps 및 mapDispatchToProps)를 사용합니다.

자세한 내용은 여기를 참조해 주세요.

mapStateToProps React 컴포넌트 사용:

import Item from './Item.jsx';
import { createStore } from 'redux';
import { getProduct, addProduct } from '../../actions';
import { connect } from "react-redux";

class Bundles extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    var productData = this.props.productData
    return (
      <div>
        <span>
          {
            productData.map(item => (
              <Item item={item} key={item.id} />
            ))
          }

        </span>
      </div >
    )
  }
}

const mapStateToProps = (state) => {
  // console.log(state.getProduct)
  return {
    productData: state.getProduct,
  };
};

export default connect(mapStateToProps)(Bundles);

제품 리듀서

const productReducer = (state = data, action) => {
  switch (action.type) {
    case "GET_PRODUCT":
      console.log(state)
      return state
    default:
      return state;
  }
}

export default productReducer;

Root Reducer(모든 리듀서 조합)

import getProduct from './products';
import getReviews from './reviews';

import { combineReducers } from 'redux';

const allReducers = combineReducers({
  cartReducer, getProduct, getReviews
})

export default allReducers;

액션(action/index.js)

      // console.log('hahahahah')
      return {
        type: 'ADD_PRODUCT',
        payload: n
      }
    }

언급URL : https://stackoverflow.com/questions/35300419/redux-do-i-have-to-import-store-in-all-my-containers-if-i-want-to-have-access-t