Question

我有一个使用redux的react应用，但是我不知道为什么动作创建者没有调用reducer。

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

该动作称为userLogedIn，可以在Login.js类中找到

任何帮助都会很棒！ thnx

这是代码：

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-类

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

到现在为止，这是您的问题：

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

export default combineReducers({
    user: authReducer
})

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

Answer 2

我认为问题在于您没有将动作分派到任何地方。在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 3

错误是我两次致电manageCoursesReducer换了两个不同的reducer。

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

代替

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

现在可以使用

redux动作不调用reducer

3 个答案: