redux 的连接函数

Question

我想从 redux 和 connect 函数开始。当我使用 useSelector 钩子时，一切都很好，所以我的 redux 状态有效。但是使用 connect 和 maptStateToProps 函数则不然。 number 变量未定义。

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { connect } from 'react-redux'
import { incrementNumber } from '../actions/exampleAction'

const Incrementor = ({ number, increment }) => {
  return (
    <View>
      <Text onPress={increment}>{number}</Text>
    </View>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(Incrementor)

const styles = StyleSheet.create({})

const mapStateToProps = (state) => {
  return {
    number: state.exampleReducer.number,
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch(incrementNumber()),
  }
};

这是使用 react Hooks 的工作解决方案：

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { useSelector , useDispatch} from 'react-redux'
import { connect } from 'react-redux'
import { incrementNumber } from '../actions/exampleAction'

const Incrementor = () => {
  const dispatch = useDispatch();
  const number = useSelector(state => state.exampleReducer.number)

  return (
    <View>
      <Text onPress={() => {dispatch({type: "INCREMENT"})}}>{number}</Text>
    </View>
  )
}
const styles = StyleSheet.create({})

export default Incrementor

这是我的减速器功能：

import { INCREMENT } from "../actions/exampleAction";

let initialState = { number: 0 };

export default function reducer (state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return {  ...state, number: state.number+1, };
    default:
      return state;
  }
}

这里是动作：

export const INCREMENT = "INCREMENT";

export const incrementNumber = () => {
  return {
    type: INCREMENT,
  }
};

在这里我结合了我的减速器：

import { combineReducers } from 'redux'

import exampleReducer from "./exampleReducer"

const reducers = combineReducers({
  exampleReducer,
});

export default reducers;

这是我的 App.js

import React from 'react';
import { StyleSheet, View } from 'react-native'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux';


import Incrementor from './src/components/Incrementor';
import reducer from "./src/reducers/index"

let store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

export default function App() {
  return (
    <Provider store={store}>
      <View style={styles.container}>
        <Incrementor />
      </View>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

首先，检查你是否从actions中导入了incrementNumber()，然后你必须在定义完所有mapStateToProps & mapDispatchToProps后使用connect函数，你的代码会是这样的

const mapStateToProps = (state) => ({
   number: state
})

const mapDispatchToProps = (dispatch) => ({
 increment: () => dispatch(incrementNumber())
})

export default connect(mapStateToProps, mapDispatchToProps)(Incrementor)