Add docs for useConnect and update connect

[DAreRodz]

Documentation for frontity/frontity#404

[DAreRodz]

Some code was autoformatted, I guess that's not a problem for Gitbook, right?

cc: @juanmaguitar, @mburridge

[michalczaplinski]

Could you clarify what you mean by "without passing new props" ? Which new props is it referring to? Does that mean that the value of the state props is never going to be updated in components with {injectProps: false} ?

Edit: I see that you clarify it below, but I would put it here as well 🙂

[DAreRodz]

I'll do that, thanks Michal 👍

[DAreRodz]

I slightly changed the docs, I hope it's more clear now. @michalczaplinski, @juanmaguitar could you review this?

[michalczaplinski]

👍

[juanmaguitar]

LGTM 👍

[DAreRodz]

Thanks!

[luisherranz]

Hey guys, just to clarify this, people don't need to use { injectProps: false } to use useConnect. Only they want to avoid the props. So it's optional.

And I think it should not be recommended, except for the case where you want to pass down props to a HTML tag, like:

const Input = ({ state, ...restProps}) => {
   // Do something with `state`.

  return <input {...restProps} />
};

export default connect(Input);

Because in this case, input don't want that actions and libraries end up in the DOM.

const Input = (props) => {
    const { state } = useConnect();
   // Do something with `state`.

  return <input {...props} />
};

// In this case, avoid injecting `state`, `actions` and `libraries` so they are not in `...props`.
export default connect(Input, { injectProps: false });

The rest of the time, people should use just connect. This is perfectly fine:

const Input = ({ name, type }) => {
    const { state } = useConnect();
   // Do something with `state`.

  return <input name={name} type={type} />
};

export default connect(Input);

@juanmaguitar could you please clarifying this in the docs?

[juanmaguitar]

@luisherranz @DAreRodz clarification added → #71