Preact无法调用传递到具有unistore(redux)的子组件的函数

Question

我将unistore与(p)react一起使用，我基本上是这样做的：https://github.com/developit/unistore

操作确实有效，当所有内容都在一个文件中时，如示例所示，增量确实会递增。现在，我尝试将动作增量作为属性传递到我的子组件中(子组件是App容器)：

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(); }

然后在app容器中，我尝试访问属性：

// 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);