在react-native-router-flux中没有传递给redux的操作

Question

我按照https://github.com/aksonov/react-native-router-flux/blob/master/docs/v3/REDUX_FLUX.md#step-1中的说明进行了版本beta.24中的tee，当我通过Action.push，pop，replace等导航时，没有相应的操作传递给我的reducer。

我打印在我的reducer顶部，可以捕获我手动传递的事件。是否存在我可能遇到的常见问题？

代码

减速

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

const initialState = {
    scene: {},
};

export default function SceneReducer(state = initialState, action) {
    console.log(action);
    switch (action.type) {
        case ActionConst.FOCUS:
            return { ...state, scene: action.scene };
        default:
            return state;
    }
}

合并减速机

import { combineReducers } from 'redux';
import SceneReducer from './SceneReducer';

const rootReducer = combineReducers({
    routing: SceneReducer,
    // other reducer here...
});

export default rootReducer;

应用

import RootReducer from './RootReducer';

import loginRouter from './LoginRouter';
const ReduxRouter = connect()(Router);

const store = compose(applyMiddleware(thunkMiddleware))(createStore)(RootReducer);

const navigator = Actions.create(
    <Modal hideNavBar>
        <Scene key="root" hideNavBar>
            <Scene key='login1' component{Log1} />
            <Scene key='login2' component{Log2} />
        </Scene>
        <Scene key="modalRoot"><Scene key="modal" component={Comp} /></Scene>
    </Modal>,
);

export default class AppRouter extends Component {
    render() {
        return (
            <Provider store={store}>
                <ReduxRouter scenes={navigator} />
            </Provider>
        );
    }
}

感谢您的帮助！

Answer 1

尝试将ReduxRouter替换为：

import { Router, Reducer } from 'react-native-router-flux';
import { connect } from 'react-redux';

const ReduxRouter = connect()(({ dispatch, children, ...props }) => (
  <Router
    {...props}
    createReducer={params => (state, action) => {
      dispatch(action);
      return Reducer(params)(state, action);
    }}
  >
    {children}
  </Router>
));

此外，对于减速器，动作的路线键是routeName而不是scene（可能你的版本不同，所以注意两者）：

我正在使用"react-native-router-flux": "4.0.0-beta.27"。

Answer 2

您需要在代码中进行一些修改。

您需要实现并使用来自react-native-router-flux的{​​{3}}对象，该对象可以适当地定义和处理这些操作。

然后将其绑定到 SceneReducers.js

import {Reducer, ActionConst, Actions} from 'react-native-router-flux'

const defaultReducer = Reducer();

export default (state, action) => {
console.log(action);
  switch (action.type) {
      case ActionConst.FOCUS:
          return defaultReducer(state, action);

      default:
        return defaultReducer(state, action);
  }
}

  

加载缩小器 AFTER actions.create非常重要，因此请勿在此处使用导入。

这是因为减速机的initial state＆＃39;必须在编译时时可用，并且Router已创建运行时。

因此，在应用中使用

// create actions
// connect your router to the state here
const ReduxRouter = connect((state) => ({ state: state.routing }))(Router);
const RootReducer = require('./RootReducer').default;

// define the store
const store = compose(applyMiddleware(thunkMiddleware))(createStore)(RootReducer);

请查看此reducer到follow-up。由于外部状态的非深层链接，您可能会遇到问题，因此您可以在版本4.0.0-beta.23之前检查它在thread评论中提到。

希望有所帮助