React Native - Redux

Question

Итак, я начинаю с реакции натива и редукса. Я пытаюсь настроить базовое состояние приложения c, просто свойство counter, которое увеличивается при нажатии кнопки. В основном, не выдается никакой ошибки, но состояние не обновляется, по крайней мере, на экране counter имеет то же значение.

Я попытаюсь документировать приведенный ниже код.

Приложение. js - там, где я создаю хранилище и базовый c редуктор

import {createStore} from 'redux'
import {Provider} from 'react-redux'

import App from './src/App'

const initialState = { counter: 0 }
const reducer = (state=initialState, action) {
  switch(action.type)
  {
     case 'INCREASE_COUNTER':
       return {counter: state.counter++}
  }
  return state;
}
const store = createStore(reducer)

class AppProvider extends React.Component {
  render() {
     return (
        <Provider store={store}>
           <App />
        </Provider>
     )
  }
}

export default AppProvider

. / Src / App. js - там, где у меня реализовано представление

import {connect} from 'react-redux';

class App extends React.Component  {
   render() {
      return (
         <View>
           <Button title="increase" onPress={this.props.increaseCounter}/>
           <Text>Counter: {this.props.counter}</Text>
         </View>
      )
   }
}

function mapStateToProps(state) {
  return {counter: state.counter};
}

function mapDispatchToProps(dispatch) {
  return {
    increaseCounter: () => dispatch({type: 'INCREASE_COUNTER'}),
  };
}

export default connect(mapStateToProps)(App);

Так что никаких ошибок не возникает, но на экране все равно отображается Counter: 0, когда я нажимаю кнопку. Я, наверное, что-то здесь упускаю.

Любая помощь будет потрясающей. Спасибо и счастливого программирования!

Answer 1

Полагаю, вы должны передать mapDispatchToProps в connect функцию.

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

https://react-redux.js.org/api/connect