react-native 使用redux的connect出错 急救!!!

更新问题:
rootreducer代码:

import { combineReducers } from 'redux';

import login from './login';

const rootReducer = combineReducers({ login });

export default rootReducer;

其中的loginreducers代码:

import * as types from '../constants/ActionTypes';

const initialState = {
  loading: false,
  params: {},
  cdata: {}
};

export default function login(state = initialState, action) {
  switch (action.type) {
    case types.FETCH_LOGIN:
      return Object.assign({}, state, {
        loading: action.loading
      });
    case types.RECEIVE_LOGIN:
      return Object.assign({}, state, {
        params: action.params,
        isLoadMore: false,
        cdata: action.cdata,
        loading: !!state.cdata
      });
    default:
      return state;
  }
}

更新问题:
app组件源码:

import { Platform } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import { pxToDp } from '../utils/ScreenUtil';

import Splash from '../pages/Splash';

import HomePage from '../pages/homePage/index';
import LoginContainer from '../containers/LoginContainer';
import LearnSituation from '../pages/learnSituation/index';
import Interaction from '../pages/interaction/index';
import My from '../pages/my/index';
import PreparLessons from '../pages/prelessons/prelessons'

const TabContainer = TabNavigator(
  {
    HomePage: { screen: HomePage },
    LearnSituation: { screen: LearnSituation },
    Interaction: { screen: Interaction },
    My: { screen: My }
  },
  {
    lazy: true,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    tabBarOptions: {
      activeTintColor: '#00A774',
      inactiveTintColor: '#444444',
      showIcon: true,
      style: {
        backgroundColor: '#fff',
        height: pxToDp(100)
      },
      indicatorStyle: {
        opacity: 0
      },
      labelStyle: {
        fontSize: pxToDp(25),
        marginTop: pxToDp(-5)
      },
    }
  }
);

const App = StackNavigator(
  {
    Splash: { screen: Splash },
    Login: { screen: LoginContainer },
    PreparLessons: { screen: PreparLessons },
    Home: { screen: TabContainer }
  },
  {
    headerMode: 'screen',
    navigationOptions: {
      headerStyle: {
        backgroundColor: 'white',
        ...Platform.select({
          ios: {
            height: pxToDp(130)
          },
          android: {
            height: pxToDp(90)
          },
        }),
        paddingLeft: pxToDp(24),
        paddingRight: pxToDp(24),
        borderBottomColor: '#F3F3F3',
        borderBottomWidth: pxToDp(1),
        borderStyle: 'solid'
      },
      headerTitleStyle: {
        fontSize: pxToDp(41),
        fontWeight: 'normal',
        color: '#0F0F0F',
        alignSelf: 'center'
      },
      headerTintColor: 'black'
    },
    initialRouteName: 'Login'
  }
);

export default App;

更新问题:
打印const store = configureStore();中的store
clipboard.png

如图!!!这个是什么问题 怎么办啊 救命啊!!!!

clipboard.png

代码如下:
App.js

import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './app/store/configure-store';
import rootSaga from './app/sagas/index';
import App from './app/containers/app';

const store = configureStore();

store.runSaga(rootSaga);

const Root = () => (<Provider store={store}>
  <App />
</Provider>);
export default App;

其中configure-store在配置store,代码如下:

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware, { END } from 'redux-saga';

import rootReducer from '../reducers/index';

const middlewares = [];
const { logger } = require('redux-logger');

// 配置sgag中间件
const sagaMiddleware = createSagaMiddleware();

middlewares.push(sagaMiddleware);
//如果是开发环境
if (__DEV__) {
  middlewares.push(logger);
}
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState);
  // 运行saga
  store.runSaga = sagaMiddleware.run;
  store.close = () => store.dispatch(END);

  return store;
}

我的登陆页面代码login.js

import React, { Component } from 'react';
import {
    View,
    StatusBar
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Page from './Page';
import * as loginCreators from '../../actions/login';

class Login extends Component {
    static navigationOptions = {
        header: null
    };

    render() {
        return <View>
            <StatusBar
                backgroundColor="#00000000"
                barStyle="light-content"
                translucent={true}
            />
            <Page {...this.props} />
        </View>;
    }
}

const mapStateToProps = (state) => {
    const { login } = state;
    return {
        login
    };
};

const mapDispatchToProps = (dispatch) => {
    const loginActions = bindActionCreators(loginCreators, dispatch);
    return {
        loginActions
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

其中的Page子页面代码如下:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    TouchableOpacity,
    Image,
    View,
    TextInput
} from 'react-native';
import store from 'react-native-simple-store';
import { GenerateToken } from '../../constants/TokenSalt';
import { pxToDp } from '../../utils/ScreenUtil';
import gl_styles from '../../style/global';

class Page extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '0800211001',
            password: ''
        }
    }

    ActionLogin = () => {
        var params = {
            code: this.state.username,
            paw: this.state.password
        };
        if (params.code == "") {
            alert("请输入用户名");
            return;
        }
        if (params.paw == "") {
            alert("密码不能为空");
            return;
        }
        Object.assign(params, GenerateToken(params));

        // const { loginActions } = this.props;
        // loginActions.requestLogin(true, params);
    }

    render() {
        return (
            //ui代码
        )
    }
}

const styles = StyleSheet.create({
    //样式
});

export default Page;

我是使用的react-reduxredux-saga在开发

阅读 2.7k
2 个回答

rootReducer里面loginReducer怎么写的?

没有Provider组件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题