redux 动作不调用 reducer

Question

我有一个使用 redux 的 React 应用程序，但我不明白为什么 action creator 没有调用 reducer。

我在 authReducer 文件的 LOGGED_IN 案例中看不到控制台日志。

该操作称为 userLogedIn，可以在 Login.js class

中找到

任何帮助都会很棒！谢谢

这是代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import App from './App';
import reducers from './reducers';


const store = createStore(
    reducers,
    compose(
        applyMiddleware(thunk),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);
ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
    );

Login.js - class

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Redirect, Link } from 'react-router-dom';
import {connect} from 'react-redux';

import { userLogedIn } from '../../actions'; 
import {
    Button,
    Form,
    FormGroup,
    FormControl,
    Col,
    Checkbox,
    ControlLabel,
    HelpBlock,
    Container,
    Row
} from 'react-bootstrap';

class LoginForm extends Component {

    onSubmitLogin = (event) => {
        // let auth = this.state.auth;

        event.preventDefault();
        fetch('http://127.0.0.1/react/calc/api/user_switch/' + this.state.username + 
        '/'+ this.state.password )
        .then(response => response.json())
        .then(json => {
            console.log('json ',json)
            if(json.count > 0)
            {
                this.props.userLogedIn(this.props)
            }
        })
        .catch(error => console.log('parsing faild', error))

    }

    onChange(event){
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    redirectUser = () =>
    {
        if(this.props.user.auth)
        {
             return <Redirect to='/mechinasetup' data={this.state.data} />
        }
    }

    render() {
        console.log();
        return (
            <Container id="LoginForm" className="yellow-bg">
                <Row className="show-grid">
                    <Col xs={8} md={4}>
                        <Form>
                            <FormGroup  controlId="formHorizontalusername">
                                    <Col xs={12} sm={3} componentclass={'aa'}>
                                        דואר אלקטרוני:
                                    </Col>

                                    <Col xs={12} sm={9}>
                                    <FormControl 
                                        ref="username" 
                                        name="username" 
                                        type="text" 
                                        onChange={this.onChange.bind(this)} 
                                        placeholder="הקלד דואר אלקטרוני"/>

                                    </Col>

                                </FormGroup>
                                <FormGroup controlId="formHorizontalPassword">
                                    <Col xs={12} sm={3} componentclass={'cc'}>
                                        סיסמא:
                                    </Col>
                                    <Col xs={12} sm={9}>
                                    <FormControl ref="password" name="password" type="password" onChange={this.onChange.bind(this)} placeholder="הקלד סיסמא"/>

                                    </Col>

                                </FormGroup>
                                <FormGroup>
                                    <Col >
                                        {this.redirectUser(this)}
                                        <Button onClick={this.onSubmitLogin} type="submit" className="full-width-btn" id="loginSubmit">התחבר</Button>
                                    </Col>
                                </FormGroup>
                        </Form>
                    </Col>
                </Row>
            </Container>
        );
    }
}
const mapStateToProps = (state) =>{
    return{
        user: state.user
    }
}

export default connect(mapStateToProps, {userLogedIn})(LoginForm);

操作：

    import { LOGGED_IN } from '../consts';

    export const userLogedIn = (state) => {
        const action = {
            type: LOGGED_IN,
            state
        }
        console.log(state, ' action is auth ');
        return action
    }

authReducer.js:

  import { LOGGED_IN } from '../consts';

const initialState = {
    username: '',
    password: '',
    data: [],
    auth: false
}

export default (state = initialState, action) => {
    switch(action.type){
        case LOGGED_IN:
            console.log('LOGGED_IN');
            return{
                ...state,
                auth: true
            }

        default: 
            return state;
    }
}

reducers.js:

import { combineReducers } from 'redux';
import manageCoursesReducer from './manageCoursesReducer';
import authReducer from './manageCoursesReducer';

export default combineReducers({
    user: authReducer
})

Answer 1

我认为问题在于您没有在任何地方调度操作。在 Login.js:

上试试这个

const mapStateToProps = (state) =>{
    return{
        user: state.user
    };
};

const mapDispatchToProps = dispatch => {
    return {
        userLogedIn: (params) => dispatch(userLogedIn(params))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

如果有帮助请告诉我。

Answer 2

错误是我为两个不同的减速器调用了两次 manageCoursesReducer。

import manageCoursesReducer from './manageCoursesReducer';
import authReducer from './manageCoursesReducer';

而不是

import manageCoursesReducer from './manageCoursesReducer';
import authReducer from './authReducer';

现在可以使用了

Answer 3

如您所知，这是您的问题：

import { combineReducers } from 'redux';
import manageCoursesReducer from './manageCoursesReducer';
import authReducer from './manageCoursesReducer';

export default combineReducers({
    user: authReducer
})

您正在为两个不同的导入调用相对路径中的同一个文件。

redux 动作不调用 reducer

redux action not calling reducer

reducers

reactjs

redux