Redux verliert den Status beim Navigieren zu einer anderen Seite

Question

Ich baue eine Webanwendung mit React und Redux. Redux funktioniert, wenn ich den Status auf dieser Seite einstelle und dann wieder auf eine Anweisung wie this.props.book.bookTitle zurück zugreife. Wenn ich jedoch zu einer anderen Seite navigiere, verliert redux seinen Status und wird standardmäßig auf initialState gesetzt. Hier ist mein Code:

bookDuck.js:

const BOOK_SELECT = "book/SELECT"; 
const BOOK_DESELECT = "book/DESELECT"; 

const initialState = { 
    _id: "", 
    bookTitle: "", 
    bookCover: "", 
    bookAuthors: [], 
    bookDescription: "" 
}; 

export default function reducer(state = initialState, action) { 
    switch(action.type) { 
    case BOOK_SELECT: 
     return Object.assign({}, action.book); 

    case BOOK_DESELECT: 
     return initialState; 
    } 
    return state; 
} 

export function selectBook(book) { 
    console.log(book); 
    return {type: BOOK_SELECT, book}; 
} 

export function deselectBook() { 
    return {type: BOOK_DESELECT}; 
} 

reducer.js:

import { combineReducers } from 'redux'; 
import user from './ducks/userDuck'; 
import book from './ducks/bookDuck'; 

export default combineReducers({ 
    user, 
    book 
}); 

store.js:

import { createStore } from 'redux'; 
import reducer from './reducer'; 

export default createStore(reducer); 

index.js:

ReactDOM.render(
    <center> 
    <Provider store={store}> 
     <Router history={browserHistory}> 
     <div> 
      <Route exact path="/" component={Home} /> 
      <Route path="/login" component={Login} /> 
      <Route path="/createAccount" component={CreateAccount} /> 
      <Route path="/createBookGroup" component={CreateBookGroup} /> 
      <Route path="/addMembers" component={AddMembers} /> 
     </div> 
     </Router> 
    </Provider> 


    </center> 
    , document.getElementById('root')); 

Im folgenden Codeabschnitt stelle ich den Status ein und navigiere zu einem neuen Fenster.

createBookGroup() { 
    let groupToCreateInfo = { 
     bookTitle: this.props.bookTitle, 
     bookCover: this.props.bookCover, 
     bookAuthors: this.props.bookAuthors, 
     bookDescription: this.props.bookDescription 
    } 

    console.log("Create book group is " + groupToCreateInfo.bookTitle); 

    store.dispatch(selectBook(groupToCreateInfo)); 
    window.location = '/addMembers' 
    } 

Dies wird in einer Child-Komponente durchgeführt. Ich habe eine Test-Schaltfläche in der übergeordneten Komponente, die this.props.book aus dem Laden zugreifen, ohne auf eine neue Seite zu navigieren, und es greift auf die Eigenschaften in redux ganz gut. Aber sobald ich auf eine neue Seite navigieren window.location verwenden, ist die redux Wert zurückkehrt, um es Anfangszustand:

const initialState = { 
    _id: "", 
    bookTitle: "", 
    bookCover: "", 
    bookAuthors: [], 
    bookDescription: "" 
}; 

Ich bin auch in den Laden zu verbinden, wenn die Klasse wie folgt exportieren:

export default connect(state => ({book: state.book}))(AddMembers);

Weiß jemand, was ich falsch machen könnte? Ich schätze die Hilfe.

Answer 1

Der Redux-Status bleibt nach dem erneuten Laden der Seite nicht erhalten. window.location = '/addMembers' verursachen eine Seite neu zu laden, und es ist nicht der richtige Weg, um programmatisch zu einer anderen Seite zu navigieren, wenn Sie react-Router verwenden. Stattdessen sollten Sie this.props.history.push('/addMembers') verwenden.

Lesen Sie die Antworten auf this question, um eine Idee zu erhalten, wie Sie im react-Router programmgesteuert navigieren.