Редуктор не срабатывает, хотя действует - PullRequest
Новая
       4

Редуктор не срабатывает, хотя действует

0 голосов
/ 23 сентября 2018

Я полный новичок в редуксе, вот мой вопрос:

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

Это мой 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();

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Вы не добавляете свой редуктор в combineReducers.У вас есть только authReducer.

0 голосов
/ 23 сентября 2018

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

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

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

...