Preact не может вызвать переданную функцию в дочерний компонент с помощью unistore (redux)

Question

Я использую unistore с (p) реагировать, в значительной степени я следую этому: https://github.com/developit/unistore

Действия работают, когда все в одном файле, как показано в примере, приращение делает приращение.Теперь я пытаюсь передать приращение действия в свой дочерний компонент как свойство (дочерний компонент является контейнером приложения):

import { h, render, Component } from 'preact';
import { Router, RouteProps, Route } from 'preact-router';
import createStore from 'unistore';
import { Provider, connect } from 'unistore/preact';
import { State } from 'interfaces/unistore';

// Import components
import App from 'containers/app/app';

// Create unitstore store
const initialState = {
    count: 0,
    secondcount: 0,
    list: []
  }
  let store = createStore(initialState);

// accept hot module update
if ((module as any).hot) {
    (module as any).hot.accept();
}

// Add actions to store
let actions = store => ({
    // for count
    increment(state) {
      return { count: state.count + 1 };
    },
    // for secondcount
    increment2: ({ secondcount }) =>({ secondcount: secondcount + 1}),

    // adds a todo item to the list array
    addTodo: (state, data)  => {
      return {
        ...state,
        list: [...state.list, data]
      }
    },
  });

// Create higher order connect component
const Kempe = connect(["count", "secondcount", "list"], actions)(({ 
    count, secondcount, list, addTodo, increment, increment2 }) =>
//     <div>
//     <p>Count: {count}</p>
//     <button onClick={increment}>Increment</button>
//     <p>Second count: {secondcount}</p>
//     <button onClick={increment2}>Increment</button>
//   </div>
    <App {...{ count, secondcount, increment, increment2 }} />
)

// Bootstrap preact app
render(<Provider store={store}><Kempe /></Provider>, document.getElementById('root'), document.getElementById('app'));

// export a function to get the current unistore state
export function getState() { return store.getState(); }

В контейнере приложения я пытаюсь получить доступ к свойствам:

// Import node modules
import { h, render, Component } from 'preact';
import { Router, RouteProps, Route, route } from 'preact-router';
import createStore from 'unistore';
import { connect } from 'unistore/preact';

// Import internal modules
import Navigation from 'components/navigation/navigation';
import Home from 'containers/home/home';
import Profile from 'containers/profile/profile';
import Default from 'containers/default/default';
import Signin from 'containers/signin/signin';
import * as constants from 'helpers/constants';
import { State } from "interfaces/unistore";

interface IndexProps { count, secondcount, increment, increment2 }

interface IndexState {}

class InnerComponent extends Component<IndexProps, IndexState> {

    constructor(props) {
        super(props);
    }

    render() {
        return (
                <div>
    <p>Count: {this.props.count}</p>
    <button onClick={this.props.increment}>Increment</button>
    <p>Second count: {this.props.secondcount}</p>
    <button onClick={this.props.increment2}>Increment</button>
  </div>
        )
    }
}

// Connect component to unistore store
const Index = connect(["count", "secondcount", "increment", "increment2"])(({ count, secondcount, increment, increment2 }) => {
    return (
        <InnerComponent {...{ count, secondcount, increment, increment2 }} />
    )
})

// export the module
export default Index;

Инкремент не работает сейчас.Чего мне не хватает?

Answer 1

Не connect() дочерний компонент (приложение).Вы пропускаете increment как реквизит, а затем перезаписываете его, используя connect.

const actions = store => ({
  increment(state) {
    return { count: state.count + 1 };
  }
});

const Outer = connect(['count'], actions)(props =>
  <Inner count={props.count} increment={props.increment} />
);

const Inner = ({ count, increment }) => (
  <div>
    count: ${count}
    <button onClick={increment}>Increment</button>
  </div>
);

//...
render(<Provider store={store}><Outer /></Provider>, document.body);