React-native-router-flux: Интеграция с Redux

Созданный на 12 апр. 2016  ·  34Комментарии  ·  Источник: aksonov/react-native-router-flux

Привет,
наверное, не место спрашивать, но ...
Я пытаюсь получить интеграцию redux, работающую с вашим Reducer.
Мне удалось это сделать, но я не уверен, правильный ли это подход?

const reducerCreate = params=>{
    const defaultReducer = Reducer(params);
    injectAsyncReducer(store, 'router', defaultReducer);
    return (state, action)=>{
        store.dispatch(action);
        return defaultReducer(state, action);
    }
};

Итак, из приведенного выше кода я создал магазин, объединил пару редукторов, а затем добавил defaultReducer с помощью метода store.replaceReducer (внутри injectAsyncReducer ).
Кажется, это работает нормально, и store.dispatch отправляет правильные действия, и состояние обновляется.
Единственное, что меня беспокоит, так это то, что return defaultReducer(state, action); похоже, делает то же самое, что и отправка ..

Может быть, пример лучшей практики для интеграции с редукцией не будет лишним?

Ваше здоровье,
Стивен.

Самый полезный комментарий

Привет, ребята, я только что обновил README, чтобы сделать интеграцию redux более понятной. Пожалуйста, взгляните и дайте мне знать, можно ли его улучшить:

https://github.com/lynndylanhurley/react-native-router-flux#reduxflux

Все 34 Комментарий

Здесь очень похожая проблема. Замечательная особенность этого маршрутизатора в 2.x заключалась в том, что он имел такой смысл, когда мы легко могли подключаться к каждому изменению маршрута. Теперь интеграция, похоже, не работает должным образом. Actions.BEFORE_ROUTE позволил нам легко подключиться к нашим редукторам.

@maitriyogin Да, похоже, дубликат.
@maitriyogin @crockpotveggies Вы смотрели пример проекта, чтобы увидеть интеграцию? Он не использует store.dispatch и не видит там все ваши действия ....

@aksonov У меня такая же проблема, как и у @maitriyogin. Хотя в примере показано, как выполнять действия при изменении маршрутизатора, он не показывает, как использовать редуктор по умолчанию и, например, использовать его с combReducers для обновления состояния хранилища при использовании нескольких редукторов. Я бы хотел (ожидаю) иметь возможность connect() маршрутизатора, а затем сделать что-то вроде этого:

import { Reducer as routerReducer } from 'react-native-router-flux';

const rootReducer = combineReducers({
  application: applicationReducer,
  auth: authReducer,
  router: routerReducer,
});

export default rootReducer;

Но это не сработает. Вместо этого он будет жаловаться на то, что initialState пусто.

Привет,
это то, на что я надеялся, поскольку он будет следовать той же схеме, что и response-redux-router ...
Я обошел это, добавив редуктор после его создания с помощью функции replaceReducers injectAsyncReducer(store, 'router', defaultReducer);
комбайн

export default function createReducer(asyncReducers) {
  return combineReducers({
    login,
    ...asyncReducers
  });
}
function injectAsyncReducer(store, name, asyncReducer) {
  store.asyncReducers[name] = asyncReducer;
  store.replaceReducer(createReducer(store.asyncReducers));
}

const reducerCreate = params=>{
    const defaultReducer = Reducer(params);
    injectAsyncReducer(store, 'router', defaultReducer);
    return (state, action)=>{
        console.log("ACTION:", action);
        store.dispatch(action);
        return defaultReducer(state, action);
    }
};

с reducerCreate подается в маршрутизатор

 <Provider store={store}>
        <Router createReducer={reducerCreate}>
....

это работает, но немного беспорядочно.
/Стивен.

Да, это кажется немного эммм .. окольным путём :)

У меня такая же проблема. Почему он жалуется на initialState ?

@maitriyogin С вашим взломом вы видите все действия, предоставляемые из response-native-router-flux? Я вижу в своих журналах только действия push & BackAction .

Вот мой обходной путь:

Создайте редуктор (файл Router.js):

import { Reducer } from 'react-native-router-flux';

// needs to fake params to pass sanity checks
const routerReducer = Reducer({initialState: {key: true}, scenes: true});

export default function(state = null, action) {
  if (action.type === 'RootContainerInitialAction') {
      return action.initialState;
  } else {
      return routerReducer(state, action);
  }
}

Редуктор по умолчанию - это оболочка для установки начального состояния возвращаемой внутренней функции, которая является фактическим редуктором. Я буду иметь дело с начальным состоянием с помощью RootContainerInitialAction (действие, переданное для инициализации по умолчанию), поэтому я просто имитирую объект, чтобы пройти проверку работоспособности.

Но теперь вы можете делать:

...
import router from './Router';

export default combineReducers({
  awesomeReducer,
  ...
  router,
});

На компоненте маршрутизатора:

import store from 'path/to/store';

const createReducer = (params) => {
  // initial state
  const { initialState , scenes} = params;
  const routerInitialState = {...initialState, scenes};
  // dispatch actions
  return (state, action) => {
    // dispatch initial state of router
    if(action.type === 'RootContainerInitialAction') {
      action.initialState = routerInitialState;
    }
    store.dispatch(action);
    return store.getState().router;
  };
};

а потом:

Javascript: ... <Router createReducer={createReducer} > <Scene ... > ... </Scene> </Router> ...

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

К сожалению, мне не удалось использовать функцию «response-redux» connect потому что мне нужно отправить действие, а затем вернуть состояние (и я думаю, что это невозможно сделать даже с mergeProps). Итак, я схватил магазин.


Я не использую пакет по назначению, но я не нашел точек входа, чтобы сделать это лучше. Возможно, если у компонента Router должны быть эти точки входа (пользовательский getRouterState вместо жестко запрограммированного как this.state, пользовательская функция для вызова действия диспетчеризации вместо передачи редуктора в Router и т. Д.)

@deoqc - что вы думаете об этом решении: https://github.com/aksonov/react-native-router-flux/pull/531 ?

Прямо сейчас он отправляет только действие FOCUS , но его можно расширить для отправки всех действий.

@lynndylanhurley, ваша цель - найти текущий экран? Не можете найти его в состоянии роутера? Если это так, вы можете просто найти его из текущего состояния маршрутизатора в хранилище redux (если следуете моему подходу).

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

Текущий подход кажется независимым от реализации потока, вместо попытки иметь точки входа для интеграции с другими реализациями (redux, fb flux, ядерный).

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

@deoqc - моему приложению просто нужно знать, какой экран является текущим экраном. В версии 2 это было возможно, прослушивая действия BEFORE_FOCUS и AFTER_FOCUS . Ни одно из действий, отправленных v3, не предоставляет эту информацию. Действие FOCUS_ACTION из # 531 предоставляет именно эту информацию.

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

531 ненавязчив, он не может ничего сломать и максимально упрощает интеграцию с redux.

Если вас беспокоит продолжение обслуживания, я был тем, кто реализовал исходные действия BEFORE_FOCUS и AFTER_FOCUS . Я пытаюсь продолжить обслуживание функции, от которой зависят мои приложения.

В основном с тобой согласен @lynndylanhurley. Просто подумал, что этот PR специфичен для редукции и интегрируется только с одной функцией, поэтому, возможно, он не будет соответствовать цели создателя / сопровождающего пакета (но это всего лишь предположение, и я наткнулся на этот пакет несколько недель назад, так что вы наверняка знаю лучше).

@lynndylanhurley только что увидел, что получить текущий экран очень просто (из Reducer.js):

function getCurrent(state) {
  if (!state.children){
        return state;
    }
  return getCurrent(state.children[state.index]);
}

Итак, с моим обходным путем просто нужно getCurrent(store.getState().router) . Это просто работает, если вы сделали обходной путь для начала, и это дает вам большую интеграцию с redux (состояние маршрутизатора фактически находится в хранилище redux, и каждое изменение состояния передается ему).

Если маршрутизатор действительно получил это состояние из магазина по дизайну (например, this.state = getRouterState || {}; в маршрутизаторе вместо передачи его в createReducer ) и если Reducer имеет незначительные изменения, чтобы не чувствовать такое хакерское решение, не лучше ли было бы для вас?

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

@deoqc - Я ценю ваши усилия, которые вы пытаетесь мне помочь. Ваше решение действительно работает.

Я сделал # 531, чтобы уменьшить количество связующего кода в моем приложении, но я ценю аргументы, лежащие в основе системы createReducer .

537 должен работать так, как задумано системой createReducer .

Привет, ребята, я только что обновил README, чтобы сделать интеграцию redux более понятной. Пожалуйста, взгляните и дайте мне знать, можно ли его улучшить:

https://github.com/lynndylanhurley/react-native-router-flux#reduxflux

@lynndylanhurley - Это ОБЪЕДИНИТЬ @aksonov !

@caledhwa thx !! (^^,)

это действительно круто!
Огромное спасибо, я уверен, что сообщество полюбит вас за это ...

Я все еще немного не понимаю, зачем нужен редуктор RNRF?
Почему в функции reducerCreate нельзя использовать редуктор, созданный на шаге 1?
Я попробую это сделать, и, надеюсь, это будет иметь смысл.
Улыбки,
/Стивен.

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

Другими словами, RNRF не имеет ничего общего с редукцией. Если мы хотим отправить действия в redux, мы должны сделать это сами вручную, используя хук reducerCreate .

@lynndylanhurley

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

с уважением.

@zxcpoiu - ваш комментарий только что сделал мне день. рад помочь: крокодил:

все, @lynndylanhurley , @zxcpoiu
Я добавил диспетчерский вызов (если он существует) в Actions сейчас, чтобы упростить интеграцию redux (без необходимости создавать настраиваемый reducer). Итак, теперь вы можете видеть все действия маршрутизатора в редукторах redux с нулевым усилием (вам нужно просто подключить маршрутизатор).

Это потрясающе!! Спасибо @aksonov !!!

Итак, с описанием в README и изменениями, внесенными здесь, чтобы помочь с REDUX, можем ли мы закрыть эту проблему @aksonov? Просто подумал, что это может уменьшить шум.

Единственное, что я хотел бы увидеть, это некоторые изменения ТИПОВ названий действий. Я реализовал подход @lynndylanhurley для подключения Redux, и он работает потрясающе. Было бы здорово, если бы типы действий назывались RNRF_PUSH, RNRF_FOCUS и т.д., чтобы мне было намного проще различать действия среди моих действий redux. Если вам интересно, я могу покопаться и сделать пиар или что-то в этом роде. Как бы то ни было, я люблю эту библиотеку и хочу, чтобы она продолжала пользоваться успехом! Вперед, команда!

Можно ли объединить этот разговор в новый документ, размещенный на мастере? Перечитав несколько раз, я все еще не уверен на 100%, что то, что у меня получилось, является лучшим способом сделать это с помощью redux.

@allenmanning, если вы выполните шаги, описанные в разделе

Вы говорите о мастере или https://github.com/lynndylanhurley/react-native-router-flux#reduxflux

Я думаю, что это README в текущем репо
https://github.com/aksonov/react-native-router-flux/#reduxflux

Спасибо. Отличный проект.

Пока закрываю. Я также добавил возможную альтернативу redux, реагирующую-нативную-реактивную библиотеку в документы.

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

Привет, @lynndylanhurley, следите за своей документацией
https://github.com/lynndylanhurley/react-native-router-flux#reduxflux
Сделал демо по вашей инструкции:
https://github.com/krishbhattacharyya/Testroute
У меня не работает. Я что-то здесь сделал не так?

@lynndylanhurley Привет!
Я вижу, что действия отправляются и прибывают в редукторы redux, и это здорово.

Но если я хочу использовать redux devtools to time travel и кажется, что react-native-router-flux игнорирует изменения в состоянии, и ничего не происходит.

В основном наш вопрос, что нам нужно сделать, чтобы сделать изменения состояния react-native-router-flux render, чтобы включить time travel и вообще управлять навигацией через состояние?

Но если я хочу использовать redux devtools для путешествий во времени, и кажется, что response-native-router-flux игнорирует изменения состояния, и ничего не происходит.

По сути, наш вопрос: что нам нужно сделать, чтобы изменить состояние рендеринга response-native-router-flux, чтобы включить путешествия во времени и, в целом, управление навигацией через состояние?

Мне тоже было бы интересно

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

willmcclellan picture willmcclellan  ·  3Комментарии

maphongba008 picture maphongba008  ·  3Комментарии

sarovin picture sarovin  ·  3Комментарии

wootwoot1234 picture wootwoot1234  ·  3Комментарии

tonypeng picture tonypeng  ·  3Комментарии