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

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에서 상점의 모든 항목을 나열하고 싶습니다 .

감사

---

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

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

Check out this answer: https://stackoverflow.com/a/36214059/4040563

For further reading : https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

---

You need to use Store.getState() to get current state of your Store.

For more information about getState() watch this short video.

---

You want to do more than just getState. You want to react to changes in the store.

If you aren't using react-redux, you can do this:

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

But better is to use react-redux. In this case you use the Provider like you mentioned, but then use connect to connect your component to the store.

---

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

store.js

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/

You can compare two json objects here: http://www.jsondiff.com/

참고URL : https://stackoverflow.com/questions/38332912/how-do-i-access-store-state-in-react-redux