Использовать избыточное действие, отправка не работает

Question

Я объединил свой реактивный редукс.

Вот мой 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 / redurs / 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), это покажет, что отправка не определена.

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 / redurs / 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;
    }
};

Я понятия не имею, почему не работает моя диспетчеризация действий. Я что-то неправильно установил?

Любая помощь будет признательна.

Согласно справке Заки Обейда, я обновляю так: код действия:

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

Кажется, вы используете функцию входа напрямую. вам придется использовать реквизит. Просто смените название на запутанное и используйте через реквизит.

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 2

В компоненте 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);

Затем

вам потребуетсяДеструктурируйте из реквизита как:

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

В файле actions.js

для того, как вы используете диспетчеризацию, здесь требуется библиотека redux-thunk, и она используется для асинхронных вызовов.

и обычное действие должно выполнить эту работу за вас:

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

Надеюсь, это полезно и решит вашу проблему, Хорошего дня.

Answer 3

В приложении реагировать с избыточностью вы получаете функцию диспетчеризации либо непосредственно из-за удержания объекта хранилища (store.dispatch), либо через функциюact-redux connect, которая обеспечивает диспетчеризацию в качестве аргумента дляфункцию, которую вы пишете, а затем подключаете к компоненту

import { connect } from 'react-redux';

const mapStateToProps = ...

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

export const connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Вы не можете просто вызвать диспетчеризацию из воздуха - это не глобальная функция.