使用 redux 操作调度不起作用

Question

我已经合并了我的 react redux。

这是我的 App.js

import React from 'react';
import ReduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { compose, createStore, applyMiddleware } from 'redux';
import reducers from './src/reducers';
import AppContainer from './src/navigator'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const App: () => React$Node = () => {

  const store = createStore(reducers, {}, composeEnhancers(applyMiddleware(ReduxThunk)));

  return (
    <Provider store={store}>
      <AppContainer />   
    </Provider>     
  );
};

export default App;

src/reducers/index.js

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

export default combineReducers({
  LoginRedux: LoginReducer
});

如果我使用我的操作login()，我可以看到login action start，但是我看不到dispatch start

    import React from 'react';
    import { 
      Text, 
      View, 
      TouchableOpacity,
    } from 'react-native';
    import { connect } from 'react-redux';
    import { login } from '../actions';

    const LoginScreen = ({ navigation }) => {

      // console.log('see my test value', testValue)

      return (
        <View>
          <TouchableOpacity 
            onPress={() => {
              login();
            }
          }>
            <View>
              <Text>LOGIN</Text>
            </View>
          </TouchableOpacity>

        </View>
       </View>
      );
    }

    const mapStateToProps = (state) => {
      const { testValue } = state.LoginRedux;
      console.log('mapStateToProps testValue =>', testValue);
      return { testValue };
    };

export default connect(mapStateToProps, { login })(LoginScreen);

如果我console.log(dispatch)，会显示dispatch is not defined.

import { LOGIN } from './types';

export const login = () => {
  console.log('login action start')
  return (dispatch) => {
    console.log('dispatch start');
    // console.log(dispatch);
    dispatch({ type: LOGIN, testValue: 'I am test' });
  };  
};

src/reducers/LoginReducer.js

import { LOGIN } from '../actions/types';

const INITIAL_STATE = {
  testValue: ''
};

export default (state = INITIAL_STATE, action) => {
  console.log('reducer =>', action); // I can't see the console.log
  switch (action.type) {
    case LOGIN:
      return {
        ...state,
        testValue: action.testValue
      };
    default:
      return state;
    }
};

我不知道为什么我的操作调度不起作用。我是不是设置错了什么？

如有任何帮助，我们将不胜感激。

根据 Zaki Obeid 的帮助，我这样更新：动作代码：

export const login = () => { 
  console.log('login !');
  return { type: LOGIN }; 
};

函数组件代码：

import { login } from '../../actions';

export const SettingScreen = ({ navigation, login }) => {
  // return view code
}

const mapDispatchToProps = dispatch => ({
  // you will use this to pass it to the props of your component
  login: () => dispatch(login),
});

connect(null, mapDispatchToProps)(SettingScreen);

Answer 1

在 react-redux 应用程序中，您可以通过直接获取存储对象 (store.dispatch) 或通过 react-redux connect 函数来获取调度函数，这将将分派作为参数提供给您编写的函数，然后连接到组件

import { connect } from 'react-redux';

const mapStateToProps = ...

const mapDispatchToProps = (dispatch) => {
    return {
        someHandle: () => dispatch(myActionCreator())
    }
}

export const connect(mapStateToProps, mapDispatchToProps)(MyComponent)

您不能凭空调用 dispatch -- 它不是全局函数。

Answer 2

看来您是直接使用登录功能。你将不得不使用道具。改个名字方便混淆，通过道具使用

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

export default combineReducers({
  LoginRedux: LoginReducer
});
If I use my action login(), I can see login action start, but I can't see dispatch start

    import React from 'react';
    import { 
      Text, 
      View, 
      TouchableOpacity,
    } from 'react-native';
    import { connect } from 'react-redux';
    import { login } from '../actions';

    const LoginScreen = ({ navigation, userLogin }) => {

      // console.log('see my test value', testValue)

      return (
        <View>
          <TouchableOpacity 
            onPress={() => {
              userLogin();
            }
          }>
            <View>
              <Text>LOGIN</Text>
            </View>
          </TouchableOpacity>

        </View>
       </View>
      );
    }

    const mapStateToProps = (state) => {
      const { testValue } = state.LoginRedux;
      console.log('mapStateToProps testValue =>', testValue);
      return { testValue };
    };

export default connect(mapStateToProps, { userLogin:login })(LoginScreen);

Answer 3

在 LoginScreen 组件中

您需要添加 mapDispatchToProps

const mapDispatchToProps = dispatch => ({
  // you will use this to pass it to the props of your component
  login: () => dispatch(login()),
});


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

然后

你需要从 props 中解构为：

const LoginScreen = ({ navigation, login }) => {
  // your code
}

在actions.js

您在此处使用分派的方式需要一个库 redux-thunk 并且它用于异步调用。

正常的操作应该可以为您完成工作：

   export const login = () => ({
     type: LOGIN,
     testValue: 'I am test' 
})

我希望这对您有用，可以解决您的问题，祝你有个美好的一天。

使用 redux 操作调度不起作用

Use redux action the dispatch is not working

react-native

redux

redux-thunk

react-redux