在 react-native-router-flux 中未将操作传递给 redux答案

【问题标题】：Actions not being passed to redux in react-native-router-flux在 react-native-router-flux 中未将操作传递给 redux
【发布时间】：2017-11-20 03:35:44
【问题描述】：

我按照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。

我打印在我的减速器的顶部，并且可以捕获我手动通过调度传递的事件。是否有我可能遇到的常见问题？

代码

减速器

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>
        );
    }
}

感谢您的帮助！

【问题讨论】：

标签： react-native react-redux react-native-router-flux

【解决方案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>
));

另外，对于 reducer，action 的路由键是 routeName 而不是 scene（可能你的版本不同，所以要注意两者）：

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

【讨论】：

谢谢，它与 4.0.0-beta.27 和 redux 3.7.2 一起使用就像一个魅力
@Syd 这会从状态改变路线吗？
@AntoAntony 你的路由存储在 redux 中，这就是重点。
@Syd 没错。但问题是 react-native-router-flux 没有从存储中获取路由器状态。例如时间序列调试不起作用。你有什么解决办法吗？

【解决方案2】：

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

您需要实现和使用来自react-native-router-flux 的reducer 对象，该对象适当地定义和处理动作。

然后将其绑定到您的 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);
  }
}

加载reducer很重要AFTER actions.create，所以不要在这里使用import。

这是因为reducer'的initial state必须在编译时可用，并且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);

看看这个thread 到follow-up。由于外部状态的非深度链接，您可能会遇到问题，因此您可以在4.0.0-beta.23 之前的版本上检查它，如this 评论中所述.

希望对你有帮助

【讨论】：