React Redux Firebase在分派前检查是否存在值

// actions.js
export const checkValue = (value) => {
  return {
    type: 'CHECK_VALUE',
    payload: value
  }
}

// reducer.js
const initialState = {
  valueExists: false
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CHECK_VALUE':
      const { value } = action.payload;
      const valueExists = value !== undefined && value !== null;
      return {
        ...state,
        valueExists
      }
    default:
      return state;
  }
}

// MyComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { checkValue } from './actions';

const MyComponent = ({ checkValue, valueExists }) => {
  const handleCheckValue = () => {
    // 获取用户输入的值
    const value = document.getElementById('input').value;
    // 分派checkValue action
    checkValue(value);
  }

  return (
    <div>
      <input id="input" type="text" />
      <button onClick={handleCheckValue}>检查值</button>
      {valueExists && <p>值存在</p>}
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    valueExists: state.valueExists
  }
}

const mapDispatchToProps = {
  checkValue
}

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