Redux - Reducer wird nicht aufgerufen

Question

Ich versuche Redux zu lernen. Ich folgte einem Online-Tutorial und nutzte ihr Beispiel und es funktionierte gut. Dann habe ich noch eine kleine Test-App gemacht und es hat gut funktioniert. Jetzt probiere ich eine andere kleine Test-App aus und ich bleibe bei diesem Fehler stecken und habe keine Ahnung warum.

Die App ist einfach ein Eingabefeld und eine Schaltfläche, und wenn Sie auf die Schaltfläche klicken, fügt das, was in dem Feld ist, zu einer Liste hinzu, die unten angezeigt wird.

Der Aktuator aktualisiert den Status jedoch nicht. Ich habe mir die häufigen Probleme angeschaut, die das verursachen, und kann diese Fehler in mir nicht finden, mein Reduzierer ändert den Zustand nicht und ich habe den Versand und so weiter gebunden. Vielleicht habe ich gerade irgendwo etwas falsch gemacht (oder so etwas Kleines und Dummes), aber ich kann es einfach nicht funktionieren lassen.

Also habe ich versucht, es zu ändern, so dass es nur anzeigt, was Sie in das Feld eingeben, und es funktioniert immer noch nicht. Wer weiß, warum der Reduktor nicht aktiviert wird?

index.js (main)

import 'babel-polyfill'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Provider} from 'react-redux'; 
import {createStore, applyMiddleware} from 'redux'; 
import thunk from 'redux-thunk'; 
import promise from 'redux-promise'; 
import createLogger from 'redux-logger'; 
import allReducers from './reducers'; 
import App from './components/App'; 

const logger = createLogger(); 
const store = createStore(
    allReducers, 
    applyMiddleware(thunk, promise, logger) 
); 

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

App.js

import React from 'react'; 
import NameList from '../containers/name-list.js' 
import Input from '../containers/input.js' 

const App =() => (
    <div> 
    <Input /> 
    <hr /> 
    <NameList /> 
    </div> 
); 

export default App; 

index.js (action)

export const addName = (name) => { 
    return { 
     type: 'NAME_ADDED', 
     payload: name 
    } 
}; 

Minderer-Add-name.js

export default function (state = null, action) { 
    switch (action.type) { 
     case 'NAME_ADDED': 
      return action.payload; 
      break; 
    } 
    return state; 
} 

index.js (Minderer Kombinierer)

import {combineReducers} from 'redux'; 
import AddNameReducer from './reducer-add-name'; 


const allReducers = combineReducers({ 
    nameList: AddNameReducer 
}); 

export default allReducers 

input.js

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import {addName} from '../actions/index' 

class Input extends Component { 
    render() { 
    return(
     <div> 
     <input id='name-input' /> 
     <button id='add-name-button' onClick={() => addName(document.getElementById('name-input').value)}>Add name</button> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    nameList: state.nameList 
    }; 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({addName: addName}, dispatch); 
} 

export default connect(mapStateToProps, matchDispatchToProps)(Input); 

Name-list.js

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 

class NameList extends Component { 

    getNameList() { 
    //This is where I'll loop through this.props.nameList and build the list of elements 
    return this.props.nameList; 
    } 

    render() { 
    return(
     <div>Current list : {this.getNameList()}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    nameList: state.nameList 
    }; 
} 

export default connect(mapStateToProps)(NameList); 

Danke für jede Hilfe!

Answer 1

Ich denke, Ihre Aktion ausgelöst worden ist.

In Ihrem input.js Taste Ein Tag,

ändern

onClick={() => addName(document.getElementById('name-input').value)} 

zu

onClick={() => this.props.addName(document.getElementById('name-input').value)} 

Sache sollte, wird durch mapDispatchToProps und weitergegeben werden 'bindActionCreators (Aktionen, Versand)' Aktion Wickeln Sie Ihre Aktion mit "Versand" und durchlaufen Sie Ihre Komponente über Requisiten "AddName".(Wie in Ihrem mapDispatchToProps definiert)

Eine allein Aktion ist wie eine Kugel (nur Objekt zurückgeben) Sie brauchen etwas, es zu schießen (Versand)

In Ihrem Fall

import {addName} from '../actions/index' <--- a bullet 

erklärt worden und Ihr onClick, ohne Versand, würde nur ein Objekt zurückgeben und es nicht zu Reduzierer schicken.

addName() // <--- Just a bullet 

Aber

this.props.addName() // <--- bullet with a gun 

ist von mapDispatchToProps/bindActionCreators ... es hat dispatch() umschlungen, dass derjenige ist, würden wir verwenden.

Answer 2

Sie sollten bestehenden Zustand mit der neuen Aktion Nutzlast in Minderer-Add-name.js kombinieren, anstatt nur die Nutzlast Rückkehr heißt

return Object.assign({}, state, { 
    todos: [ 
     ...state, 
     { 
     action.payload 
     } 
    ] 
    })