Question

我对redux完全陌生，这是我的问题：

我想从后端获得各种技能，它成功获取了我想要的数据，但是当调度行动时，减速器并没有让步。

这是我的NewSkill.js：

import React, {Component} from 'react';
import { connect } from 'react-redux';
import Select from 'react-select';
import Aux from '../../../hoc/Aux';
import * as actions from '../../../store/actions/index';
import { withRouter } from 'react-router-dom';

class NewSkill extends Component {

componentDidMount () {
    this.props.onInitSkills();
}

render () {
    return (
        <Aux>
            <p>Please make sure your tag has not yet been created : </p>
            {/* <Select options={this.state.skills.skills} /> */}
        </Aux>
    );
};
}

const mapStateToProps = state => {
    return {
        skills: state.skills.skills,
        error: state.skills.error
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onInitSkills: () => dispatch(actions.initSkills())
    }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps) (NewSkill));

这是减速器

import * as actionTypes from '../actionTypes';
import { updateObject } from '../../utility';

const initialState = {
    skills: null,
    error: false
}

const setSkills = ( state, action ) => {
    console.log("REDUCER");
    return updateObject( state, {
        skills: action.skills.skills,
        error: false 
    });
}

const fetchSkillsFailed = ( state, action ) => {
    return updateObject( state, { error: true } );
}

const reducer = ( state = initialState, action ) => {
    switch ( action.type ) {
        case actionTypes.SET_SKILLS: return setSkills( state, action );
        case 

actionTypes.FETCH_SKILLS_FAILED: return fetchSkillsFailed( state, action );
        default: return state;
    }
};
export default reducer;

以下是动作：

import * as actionTypes from './actionTypes';
import axios from '../../axios';

export const initSkills = () => {
    return dispatch => {
        axios.get('/skills')
            .then( response => {
                dispatch(setSkills(response.data))
            })
            .catch( error => {
                dispatch(fetchSkillsFailed());
            });
    };
};

export const setSkills = (skills) => {
    console.log("ACTION");
    return {
        type: actionTypes.SET_SKILLS,
        skills: skills
    };
};

export const fetchSkillsFailed = () => {
    return {
        type: actionTypes.FETCH_SKILLS_FAILED
    }
};

操作索引：

export {
    auth,
    logout,
    authCheckState
} from './auth';
export {
    initSkills
} from './skill';

actionTypes：

export const FETCH_SKILLS_FAILED = 'FETCH_SKILLS';
export const SET_SKILLS = 'SET_SKILLS';

以及实用程序功能：

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    };
};

因此，基本上每次控制台仅记录ACTION而不记录REDUCER。已经尝试了几个小时，但无法说出问题所在。感谢您的帮助！

编辑：这是包装整个内容的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import authReducer from './store/actions/reducers/auth';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const rootReducer = combineReducers({
    auth: authReducer
});

const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
);

ReactDOM.render( app, document.getElementById( 'root' ) );
registerServiceWorker();

Answer 1

我认为问题在于您的技能状态为空，将其替换为空数组，我尝试使用此代码笔并调用了reducer（我删除了异步调用，因为代码笔让我沉迷于笨拙的中间件）

const initialState = {
  skills: [],
  error: false
}

https://codepen.io/anon/pen/VGNMYG

Answer 2

您没有在combineReducers中添加减速器。您只有authReducer。

尽管动作可以执行，Reducer仍不会触发

2 个答案: