Question

这是filterAction动作，它向持久化减速器发送值。在组件的下拉菜单中使用dispatch()调用此操作。

import { SORT_BY_TITLE, SORT_BY_RELEASED_AT } from './types';

// sort by title
export const sortByTitle = () => ({
  type: SORT_BY_TITLE
});

// sort by released at
export const sortByReleasedAt = () => ({
  type: SORT_BY_RELEASED_AT
});

对应的filterReducer

import { SORT_BY_TITLE, SORT_BY_RELEASED_AT } from '../actions/types';

const initialState = {
  sortBy: 'title'
};

export default function(state = initialState, action) {
  switch(action.type) {
    case SORT_BY_TITLE:
      return {
        ...state,
        sortBy: 'title'
      };
    case SORT_BY_RELEASED_AT:
      return {
        ...state,
        sortBy: 'releasedAt'
      };
    default:
      return state;
  }
};

filterReducer值是在主组合减速器中保留的值。

export default combineReducers({
  books: booksReducer,
  book: bookReducer,
  form: addBookFormReducer,
  filter: filterReducer
});

该应用的store

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const middleware = [thunk];

const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['filter']
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = createStore(persistedReducer, {}, applyMiddleware(...middleware));
export const persistor = persistStore(store);

保留在主减速器的filter部分上的值将显示在下拉更改中，并用filterAction调用dispatch()。

这是booksReducer，它创建了应用程序books的{{1}}部分，因此store显示在组件中。

books

主减速器的import { GET_BOOKS, BOOKS_LOADING, DELETE_BOOK, SORT_BY_TITLE, SORT_BY_RELEASED_AT } from '../actions/types'; const initialState = { books: [], loading: false }; const booksReducer = (state = initialState, action) => { switch(action.type) { case BOOKS_LOADING: return { ...state, loading: true }; case GET_BOOKS: return { ...state, books: action.payload, loading: false }; case DELETE_BOOK: return { books: [...state.books.filter(book => book._id !== action.payload.id)] }; case SORT_BY_TITLE: return { ...state, books: [...state.books.sort((a, b) => a.title < b.title ? -1 : 1 )] }; case SORT_BY_RELEASED_AT: return { ...state, books: [...state.books.sort((a, b) => a.releasedAt < b.releasedAt ? -1 : 1 )] }; default: return state; } }; export default booksReducer;部分在重新加载页面后仍然有效，但是显示的filter列表具有默认的按标题排序。

我如何获得该应用程序以在页面重载上保持排序？完整的仓库位于https://github.com/ElAnonimo/booklister

上

Answer 1

在BookList加载getBooks()动作后，将已排序的图书列表重置为其默认排序，因此，更容易仅保留filter的{{1}}道具，然后在store组件的每次加载中对books列表进行排序。

进行了更改

到BookList

booksReducer

到import { GET_BOOKS, BOOKS_LOADING, DELETE_BOOK } from '../actions/types'; const initialState = { books: [], loading: false }; const booksReducer = (state = initialState, action) => { switch(action.type) { case BOOKS_LOADING: return { ...state, loading: true }; case GET_BOOKS: return { ...state, books: action.payload, loading: false }; case DELETE_BOOK: return { books: [...state.books.filter(book => book._id !== action.payload.id)] }; default: return state; } }; export default booksReducer;

BookList

持久值不会影响链下的代码

1 个答案: