Komponente wird nach der Verwendung von combineReducers nicht mehr aktualisiert

Question

Wie lautet das aktuelle Verhalten?

Ich habe eine Header-Komponente, die aktualisiert werden sollte, nachdem Login-Daten abgerufen werden. Er überprüft den Namen eines Benutzers und zeigt eine Willkommensnachricht an.

Beim Erstellen eines Geschäfts ohne combineReducers, nur mit der loginReducer Ich habe alles funktioniert funktioniert, Zustand wird aktualisiert und dann wird die Komponente auch aktualisiert. Bei Verwendung von "combineReducers" wird die Komponente jedoch nicht mehr aktualisiert, obwohl ich denselben Reduzierer darin verwende. Ich benutze auch eine Logger-Middleware, um Statusänderungen anzuzeigen, und der Status scheint korrekt aktualisiert zu werden.

---

Code-Beispiel:

Dies funktioniert:

Bitte beachten Sie, dass ich nur hier relevanten Dateiteile zeigt bin.

index.js

const loggerMiddleware = createLogger(); 

// Here I'm creating the store with a single reducer function 
const store = createStore(loginReducer, applyMiddleware(thunkMiddleware, loggerMiddleware)); 

const router = createRouter(); 

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

loginReducer.js

// Please notice that here I'm not mutating state in any way 
// I'm always returning a new state as recommended by the docs 
const ACTION_HANDLERS = { 
    [REQUEST_LOGIN]: (state, action) => { 
    return ({ ...state, username: action.payload.username, authHeader: 'Basic ' + base64Encode(action.payload.username + ':' + md5(action.payload.password))}); 
    }, 
    [RECEIVE_LOGIN]: (state, action) => { 
    return ({ ...state, resources: action.payload.resources, isCashier: action.payload.isCashier }); 
    }, 
    [LOGOUT]: (state) => { 
    return ({ ...state, username: null, resources: {}, authHeader: null, isCashier: null }); 
    } 
} 

const initialState = { isCashier: null, resources: {}, username: null }; 
export default function loginReducer (state = initialState, action) { 
    const handler = ACTION_HANDLERS[action.type] 

    return handler ? handler(state, action) : state 
} 

export default loginReducer; 

LoginContainer.js

const mapActionCreators = { 
    doLogin, 
    doLogout 
} 

const mapStateToProps = (state) => ({ 
    resources: state.resources, 
    username: state.username 
}) 

export default connect(mapStateToProps, mapActionCreators)(Login) 

---

funktioniert das nicht:

Dies ist die Version, die ich die einzigen Änderungen nicht funktioniert gemacht haben waren: * ich jetzt das Einwickeln der loginReducer innen combineReducers * ich die mapStateToProps geändert Funktion, um diese Eigenschaften aus dem verschachtelten login Objekt innerhalb des Staates

index.js

const rootReducer = combineReducers({ 
    login: loginReducer 
}); 

const loggerMiddleware = createLogger(); 

// Now I'm not using the raw `loginReducer` anymore 
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware)); 

const router = createRouter(); 

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

zu bekommen

loginReducer.js -> Diese bleibt gleich wie oben

LoginContainer.js

const mapActionCreators = { 
    doLogin, 
    doLogout 
} 

// Here I'm getting properties from `state.login` instead of `state` now due to the use of combineReducers 
const mapStateToProps = (state) => ({ 
    resources: state.login.resources, 
    username: state.login.username 
}) 

export default connect(mapStateToProps, mapActionCreators)(Login) 

Hier ist ein Bild, in dem ich die Zustände beschreiben, nachdem jede der Aktionen Dispatching:

Wann immer eine Aktion gesendet wird und die vorherige und der nächste Status wird protokolliert, sie sind korrekt, aber meine Komponente wird nicht aktualisiert.

Fehle ich etwas hier oder ist das wirklich ein Fehler?

Answer 1

Bitte testen Sie Ihre Reduzierungen. Zustand halten bitte. Verwenden Sie eine hochwertige Komponente für die Authentifizierungslogik. Verwenden Sie erneut auswählen, um die Leistung zu verbessern. Es ist ein Bugtest, den du reduzierst. das sollte funktionieren. und ein tiefer verschachtelter Zustand ist nicht gut, weil es dich schwer zum Nachdenken und Verwalten macht. meinen Code unten:

import { combineReducers } from 'redux'; 
 
//import the reducers ou want 
 

 
const authReducer = combineReducers({ 
 
    loginData: LoginReducer, 
 
    permission: permissionReducer 
 
}); 
 

 
export default rootReducer;

Kontrolle dieses http://redux.js.org/docs/recipes/WritingTests.html