구성 요소가 리듀렉스 저장소에 연결되지 않는 이유

구성 요소가 리듀렉스 저장소에 연결되지 않는 이유

일부 구성 요소(USERS)를 내 스토어에 연결하려고 한다.내가 너에게 각 단계를 보여줄게.

먼저 인덱스에 내 저장소를 만든다.js:

// composeWithDevTools helps to follow state changes, remove in production
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducers, composeEnhancers(applyMiddleware(sagaMiddleware)));
//sagaMiddleware.run(usersSaga);
console.log('MYSTORE: ', store);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);

내 환원기는 다음과 같은 방식으로 코딩된다.

import { combineReducers } from 'redux';
import usersReducer from './usersReducer';

export default combineReducers({
    users: usersReducer,
});

이제 내 App.js 파일은 다음과 같다.

import React from 'react';
import { HashRouter, Route, Redirect } from 'react-router-dom';
import { AuthorisationMails } from './route-components/AuthorisationMails.js';
import { ChangePassword } from './route-components/ChangePassword.js';
import { Credits } from './route-components/Credits.js';
import { Graphs } from './route-components/Graphs.js';
import { Groups } from './route-components/Groups.js';
import { HeaderBar } from './components/HeaderBar.js';
import { Home } from './route-components/Home.js';
import { Login } from './route-components/Login.js';
import { MailServers } from './route-components/MailServers.js';
import { MailStatus } from './route-components/MailStatus.js';
import { Options } from './route-components/Options.js';
import { StatusMails } from './route-components/StatusMails.js';
import { Users } from './route-components/Users.js';

const App = () => (
    <div>
        <HashRouter>
            <HeaderBar />
            <Route path="/">
                <Redirect to="/login" />
            </Route>
            <Route path="/login" component={Login} />
            <Route path="/dashboard_user" component={Users} />
        </HashRouter>
    </div>
);

export default App;

Users(사용자)에서 mapstateToPropes를 사용하여 스토어에 연결하고 다음 내용을 참조하십시오.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../redux/actions';

export class Users extends Component {
    componentDidMount() {
        console.log('USERPROPS: ', this.props);
    }
    render() {
        return <div>Users</div>;
    }
}

const mapStateToProps = state => {
    console.log('USERSSTATE: ', state.user);
    return {
        users: state.userReducer,
    };
};

export default withRouter(connect(mapStateToProps)(Users));

여기서 문제는 USERPROPS의 console.log에 속성 사용자가 포함되어 있지 않기 때문에 어떻게든 잘못된 방식으로 연결하고 있다는 것이다.여기에는 기록 위치와 일치 항목이 포함되어 있다.

다음 url https://react-redux.js.org/api/connect을 사용하여 연결을 시도했다.

왜 내 부품이 스토어에 연결되지 않는지 알아?

state.users.users.user:

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

이를 해결하여 구성품을 가져올 때 브래킷을 제거하여 다음과 같이 처리했다.

'./route-components/Credits.js' => './route-components/Credits.js'에서 {credits } credits를 가져오기

참조URL: https://stackoverflow.com/questions/57925048/why-is-component-not-connecting-to-the-redux-store