나는 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
. 상점의 변화에 반응하고 싶습니다.
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.js
store.subscribe( () => {
console.log('state\n', store.getState());
debugger;
});
당신이 할 파일에 그것을 넣으십시오 createStore
.
state
콘솔에서 클립 보드로 개체 를 복사 하려면 다음 단계를 수행하십시오.
-
Chrome 콘솔에서 개체를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 전역 변수로 저장을 선택합니다. 변수 이름으로 temp1과 같은 것을 반환합니다.
-
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/