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

Posted 2023-02-22

【中文标题】Preact 无法使用 unistore(redux) 将传递的函数调用到子组件中

【英文标题】：Preact cannot invoke passed function into child component with 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;

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

【参考方案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);