代码之家 › 专栏 › 技术社区 › sensei

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

preact reactjs-flux react-redux reactjs

0

sensei · 技术社区 · 7 年前

我使用UnStand和(P)反应,几乎我遵循这个: https://github.com/developit/unistore

操作确实有效,当所有内容都在一个文件中时(如示例所示),增量确实递增。现在我正试图将action increment作为属性传递到我的子组件(子组件是app container):

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;

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

1 回复 | 直到 7 年前

1

Jason Miller 7 年前

不要 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);