Preact 无法使用 unistore(redux) 将传递的函数调用到子组件中答案

【问题标题】：Preact cannot invoke passed function into child component with unistore(redux)Preact 无法使用 unistore(redux) 将传递的函数调用到子组件中
【发布时间】：2018-11-19 15:28:52
【问题描述】：

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

然后我在应用容器中尝试访问属性：

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

增量现在不起作用。我错过了什么？

【问题讨论】：

标签： reactjs react-redux reactjs-flux preact

【解决方案1】：

不要connect()子组件（App）。您将 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);

【讨论】：