React Redux에서 스토어 상태에 액세스하려면 어떻게 해야 합니까?

React Redux에서 스토어 상태에 액세스하려면 어떻게 해야 합니까?

저는 redux와의 비동기 학습을 위한 간단한 앱을 만들고 있습니다.모든 것이 잘 되고 있기 때문에, Web 페이지에 실제의 상태를 표시하고 싶을 뿐입니다.렌더링 메서드에서 스토어 상태에 실제로 액세스하려면 어떻게 해야 합니까?

다음은 제 코드입니다(지금 막 배우고 있기 때문에 모든 것이 한 페이지에 표시됩니다).

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/mapx-mapstatetoprops-and-mapdispatchtoprops-mapdispatchtoprops-mapd6cd78f를 참조하십시오.

모든 답변은 프리 훅 시대의 것입니다.redex에서 상태를 가져오려면 use Selector-hook을 사용해야 합니다.

redux-reducer 파일 또는 쉽게 가져올 수 있는 파일:

import { useSelector } from 'react-redux'

export function useEmployees() {
  return useSelector((state) => state.employees)
}

응용 프로그램 코드:

const { employees } = useEmployees()

redux-timeout에 대한 자세한 내용은http://https://react-redux.js.org/api/hooks 를 참조해 주세요.

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

에 대한 자세한 내용은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

하지만 리액트 리듀스를 사용하는 것이 더 낫다.이 경우 앞서 설명한 대로 공급자를 사용하지만, 그런 다음 연결을 사용하여 구성 요소를 저장소에 연결합니다.

하이파워 디버깅을 하고 싶은 경우는, 다음과 같이 상태 변경 마다 서브 스크라이브 해, 앱을 일시 정지해, 상황을 자세하게 확인할 수 있습니다.

store.js

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

파일 안에 저장해 주세요.createStore.

복사하려면state콘솔에서 클립보드로 개체를 이동하려면 다음 절차를 따릅니다.

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

2. 에는 ★★★★★★★★★★★★★★★★★★★★」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/

HACK 솔루션: 실제 프로젝트의 예!Redux 스토어 개체를 외부 JSON 파일에 저장합니다.

STEP-1 import useStore를 react-redux에서 먼저 가져온 후 getState() 함수를 사용하여 스토어 상태에 액세스합니다.

STEP-2 영역은 Redux 스토어 내 슬라이스 이름이고 areaName은 해당 슬라이스의 상태입니다.

STEP-3 File to Save 변수를 사용하여 저장소에서 데이터를 포함한 JSON 파일을 내보냅니다.

import { useStore } from "react-redux";

const exportJsonFileFromStore = () => {

const store = useStore();
const FileSaver = require('file-saver');    
    
function exportData() {
   
    const filename = 'filter_settings';

    let prepareObject = {       // It is used to make a JSON object 
      areaName:store.getState().area.areaName  ,   
    }
    const fileToSave = new Blob([JSON.stringify(prepareObject)], {
        type: 'application/json'
    });
    // this will save file
    FileSaver.saveAs(fileToSave, filename);
}

return (
  
        <button onClick={(event: any) => exportData()}>Click me to download!</button>
   
)

}

import { ReactReduxContext } from 'react-redux';
var store  = useContext(ReactReduxContext).store.getState();

console.log(store);

https://react-redux.js.org/using-react-redux/accessing-store#using-reactreduxcontext-directly

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