React + Redux 클라이언트 응용 프로그램에서 활성 사용자 데이터를 유지할 위치

Question

내 React + Redux 클라이언트 응용 프로그램에서 활성 사용자 정보 (myapp.com/users/me에서 가져 오기)를 가져와 내가 할 수 있도록 어딘가에 보관해야합니다. 여러 구성 요소에서 액세스하십시오.

나는 window.activeUser = data이 최선의 방법이 아닐 것이라고 생각합니다. 하지만 그렇게하는 가장 좋은 방법에 관한 자료는 찾을 수 없었습니다. 내가 원하는 것을 어떻게하면 가장 잘 할 수 있을까?

Answer 1

별도의 감속기에 보관 한 다음 구성품에 connect()으로 여러 국가의 부품을 가져올 수 있습니다.

users.js 및 tags.js이라는 2 개의 감속기가 상점 설정시 combineReducers과 결합되어 있다고합시다. 단순히 connect() 호출에 함수를 전달하여 다른 부분을 가져옵니다. 그래서 ES6 + 장식을 사용하여 :

const mapStateToProps = state => { 
    return {users: state.users, tags: state.tags} 
} 

@connect(mapStateToProps) 
export default class MyComponent extends React.Component { 

아래로 당신의 render 기능에 :

return (
    <div> 
    <p>{this.props.users.activeUsernameOrWhatever}</p> 
    <p>{this.props.tags.activeTags.join('|')}</p> 
    </div> 
); 

는 그래서 다른 감속기 상태는 this.props의 객체가된다.

Answer 2

당신이 사용할 수있는 반작용의 context, HOC 또는

뭔가 같은 상황을 통해 여러 구성 요소에 대한 데이터를 사용할 수 있도록 전역 변수, ...

class ParentDataComponent extends React.Component { 
    // make data accessible for children 
    getChildContext() { 
    return { 
     data: "your-fetchet-data" 
    }; 
    } 

    render() { 
    return < Child /> 
    } 
} 

class Child extends React.Component { 
    render() { 
    // access data from Parent's context 
    return (<div> {this.context.data} </div>); 
    } 
} 

Answer 3

액션 창조자를 작성하고 componentWillMount에 전화 해당 구성 요소의 구성 요소가 마운트되기 바로 전에 실행되므로 작업 작성자는 필요한 데이터를 가져 와서 감속기에 전달합니다. 해당 감속기에서 원하는 데이터를 응용 프로그램 전체에 유지할 수 있습니다. 그래서 데이터가 필요할 때마다 당신은 redux 상태에서 그것을 검색 할 수 있습니다. this 공식 redux 웹 사이트에서 제공하는 자습서를 통해 알아야 할 모든 정보를 얻을 수 있습니다. 혹시 궁금한 점이 있으면 저를 언급하십시오.