Как получить доступ к магазину Redux с помощью React Router? - PullRequest
0 голосов
/ 21 июня 2019

В настоящее время в моем приложении у меня есть несколько Маршрутов, использующих React Router, которые обернуты в провайдере Redux.

Провайдер

<Provider store={store}>
<Router>
    <Route exact path ="/" component = {LoginPage}></Route>
    <Route exact path="/login" component ={LoginPage}/>   
    <Route path ="/change" component={MasterPage}/>     
    <Route path="/change/form" component={ChangeForm}/>
    <Route path="/change/table" component={ExpandTable} /> 
</Router>
</Provider>

В нынешнем виде я запутался, как я долженчтобы передать / получить доступ к состоянию хранилища в компонентах.

Единственное состояние, которое мне действительно нужно хранить, - это текущее состояние логина пользователя, и я хочу использовать его для изменения того, что отображается надругие маршруты.


Редуктор

У меня есть редуктор, который выглядит следующим образом:

export default (state = {}, action) => {
    switch (action.type) {
     case 'SIMPLE_ACTION':
      return {
       loggedIn: action.loggedIn,
       User: action.User,
       Group: action.Group
      }
     default:
      return state
    }
   }

Действие

И действие, котороевыглядит как

export const simpleAction = () => dispatch => {
                   dispatch({
                     type: 'SIMPLE_ACTION',
                     payload: data
                    })
                   }

Сейчас я работаю в предположении, что подключение их к хранилищу с помощью export default connect(mapStateToProps, mapDispatchToProps)(LoginForm); позволит мне получить доступ к хранилищу внутри этого компонента, но, похоже, это не так,

Меня немного смущает вопрос о том, как получить доступ к состоянию хранилища внутри компонента, а также как правильно написать действие / редуктор для изменения этого состояния.

Ответы [ 2 ]

1 голос
/ 21 июня 2019

Ваше предположение верно.Рекомендуется следовать шаблону connect.Вы можете создавать контейнеры для компонентов и выполнять подключение там.

Примерно так:

LoginPage.js

const LoginPage = ({loggedIn}) => {
    console.log(loggedIn);
    return null; // Write your markup here
}

LoginPage.propTypes = {
    loggedIn: PropTypes.bool
}

export default LoginPage;

LoginPageContainer.js

import LoginPage from './LoginPage';

let LoginPageContainer = ({loggedIn}) => {
    return <LoginPage loggedIn={loggedIn} />
};

LoginPageContainer.propTypes = {
    loggedIn: PropTypes.bool
    //...
}

const mapStateToProps = state => {
    return {
        loggedIn: state.........
    };
};

LoginPageContainer = connect(mapStateToProps)(LoginPageContainer);

export default LoginPageContainer;

ПРИМЕЧАНИЕ. Этот подход обычно используется для более сложной логики.В вашем случае сам LoginPage может быть контейнером, поэтому вам не нужен отдельный компонент.

1 голос
/ 21 июня 2019

Так что я обнаружил, что я иду не так, мне нужно было передать реквизиты на маршрут, используя:

render={(props) => <LoginPage {...props} login={store.getState()} />}>

И в моем configureStore () я передавал rootReducer вместопростой редуктор, который я сделал.

...