React Redux에서 저장 상태에 어떻게 액세스합니까?

나는 redux와 비동기를 배우는 간단한 앱을 만들고 있습니다. 나는 모든 것을 작동 시켰습니다. 이제 실제 상태를 웹 페이지에 표시하고 싶습니다. 이제 render 메서드에서 실제로 상점의 상태에 어떻게 액세스합니까?

다음은 내 코드입니다 (방금 배우기 때문에 모든 것이 한 페이지에 있습니다).

const initialState = {
        fetching: false,
        fetched: false,
        items: [],
        error: null
    }

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case "REQUEST_PENDING": {
            return {...state, fetching: true};
        }
        case "REQUEST_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                items: action.payload
            }
        }
        case "REQUEST_REJECTED": {
            return {...state, fetching: false, error: action.payload}   
        }
        default: 
            return state;
    }
};

const middleware = applyMiddleware(promise(), thunk, logger());
const store = createStore(reducer, middleware);

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

render(
    <Provider store={store}>
        <div>
            { this.props.items.map((item) => <p> {item.title} </p> )}
        </div>
    </Provider>,
    document.getElementById('app')
);

따라서 상태의 렌더링 메서드 item.title에서 상점의 모든 항목을 나열하고 싶습니다 .

감사

상태 변경을 수신하고 모든 상태 변경에 대해 업데이트하는 별도의 구성 요소를 만들어야합니다.

import store from '../reducers/store';

class Items extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
    };

    store.subscribe(() => {
      // When state will be updated(in our case, when items will be fetched), 
      // we will update local component state and force component to rerender 
      // with new data.

      this.setState({
        items: store.getState().items;
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.items.map((item) => <p> {item.title} </p> )}
      </div>
    );
  }
};

render(<Items />, document.getElementById('app'));

가져 오기 connect에서 react-redux와 상태와 구성 요소를 연결하는 데 사용connect(mapStates,mapDispatch)(component)

import React from "react";
import { connect } from "react-redux";


const MyComponent = (props) => {
    return (
      <div>
        <h1>{props.title}</h1>
      </div>
    );
  }
}

마지막으로 상태를 소품에 매핑해야합니다. this.props

const mapStateToProps = state => {
  return {
    title: state.title
  };
};
export default connect(mapStateToProps)(MyComponent);

매핑 한 상태 만 다음을 통해 액세스 할 수 있습니다. props

이 답변을 확인하십시오 : https://stackoverflow.com/a/36214059/4040563

추가 정보 : https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

Store.getState()스토어의 현재 상태를 가져 오려면 을 사용해야 합니다.

자세한 내용은 이 짧은 비디오를 getState()시청 하십시오 .

당신은 단지 getState. 상점의 변화에 ​​반응하고 싶습니다.

react-redux를 사용하지 않는다면 다음과 같이 할 수 있습니다.

function rerender() {
    const state = store.getState();
    render(
        <div>
            { state.items.map((item) => <p> {item.title} </p> )}
        </div>,
        document.getElementById('app')
    );
}

// subscribe to store
store.subscribe(rerender);

// do initial render
rerender();

// dispatch more actions and view will update

그러나 더 나은 방법은 react-redux를 사용하는 것입니다. 이 경우 언급 한대로 Provider를 사용하지만 connect 를 사용하여 구성 요소를 저장소에 연결합니다.

강력한 디버깅을 원하는 경우 상태의 모든 변경 사항을 구독하고 앱을 일시 중지하여 다음과 같이 자세한 내용을 확인할 수 있습니다.

store.subscribe( () => {
  console.log('state\n', store.getState());
  debugger;
});

당신이 할 파일에 그것을 넣으십시오 createStore.

state콘솔에서 클립 보드로 개체 를 복사 하려면 다음 단계를 수행하십시오.

1. Chrome 콘솔에서 개체를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 전역 변수로 저장을 선택합니다. 변수 이름으로 temp1과 같은 것을 반환합니다.

2. Chrome에도 copy()메서드가 있으므로 copy(temp1)콘솔에서 해당 개체를 클립 보드에 복사해야합니다.

https://stackoverflow.com/a/25140576

https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

다음과 같은 json 뷰어에서 객체를 볼 수 있습니다. http://jsonviewer.stack.hu/

여기에서 두 개의 json 객체를 비교할 수 있습니다. http://www.jsondiff.com/