fix: added 'create' and 'shallow' imports to docs

[OshriAsulin]

Description:
This pull request adds import statements to the project's documentation to illustrate how to use the create and shallow functions from the zustand library.

Changes Made:

Added import statement for create from 'zustand'.
Added import statement for shallow from 'zustand/shallow'.

This pr addresses to issue #2024

The script is top before the changes- https://docs.pmnd.rs/zustand/guides/updating-state

Screenshots:
After my changes-

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zustand-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 10, 2023 0:05am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1feb95f:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration
Next.js	Configuration
@pavlobu/zustand demo	Configuration

[dai-shi]

Thanks for working on it! Here are some suggestions.

[OshriAsulin]

Ok for that, I will change this-
"Also, we should probably change useStore to useNameStore or something to avoid confusion with exported useStore hook."

[OshriAsulin]

And the last question-
What about this message that you wrote above this message-
"I just realized that this causes a deprecation error. It should be import { createWithEqualityFn } from 'zustand/traditional'.

Now, I don't think the purpose of this doc is about shallow, so how about changing like this?"

[OshriAsulin]

If you summarize all the changes that I need to make, it's will be great.

[dai-shi]

This will be the final result (if it works without errors):

import { create } from 'zustand'

type State = {
  firstName: string
  lastName: string
}

type Action = {
  updateFirstName: (firstName: State['firstName']) => void
  updateLastName: (lastName: State['lastName']) => void
}

// Create your store, which includes both state and (optionally) actions
const usePersonStore = create<State & Action>((set) => ({
  firstName: '',
  lastName: '',
  updateFirstName: (firstName) => set(() => ({ firstName: firstName })),
  updateLastName: (lastName) => set(() => ({ lastName: lastName })),
}))

// In consuming app
function App() {
  const firstName = useStore((state) => state.firstName)
  const updateFirstName = useStore((state) => state.updateFirstName)

  return (
    <main>
      <label>
        First name
        <input
          // Update the "firstName" state
          onChange={(e) => updateFirstName(e.currentTarget.value)}
          value={firstName}
        />
      </label>

      <p>
        Hello, <strong>{firstName}!</strong>
      </p>
    </main>
  )
}

[OshriAsulin]

This will be the final result (if it works without errors):

import { create } from 'zustand'

type State = {
  firstName: string
  lastName: string
}

type Action = {
  updateFirstName: (firstName: State['firstName']) => void
  updateLastName: (lastName: State['lastName']) => void
}

// Create your store, which includes both state and (optionally) actions
const usePersonStore = create<State & Action>((set) => ({
  firstName: '',
  lastName: '',
  updateFirstName: (firstName) => set(() => ({ firstName: firstName })),
  updateLastName: (lastName) => set(() => ({ lastName: lastName })),
}))

// In consuming app
function App() {
  const firstName = useStore((state) => state.firstName)
  const updateFirstName = useStore((state) => state.updateFirstName)

  return (
    <main>
      <label>
        First name
        <input
          // Update the "firstName" state
          onChange={(e) => updateFirstName(e.currentTarget.value)}
          value={firstName}
        />
      </label>

      <p>
        Hello, <strong>{firstName}!</strong>
      </p>
    </main>
  )
}

I test it and it's work well.
But I have two quiestions:
1 If we don't using lastName, you still want to keep it?
2 Do you want that I change the name of the 'store' from useStore to useNameStore or usePersonStore?

[dai-shi]

1 If we don't using lastName, you still want to keep it?

Yeah, it would make the example more realistic.

2 Do you want that I change the name of the 'store' from useStore to useNameStore or usePersonStore?

Yes, we avoid using bare useStore in docs. Please check other places. (If we are still using it, we should rename it.)

[dai-shi]

Thanks for your contribution!

[OshriAsulin]

@dai-shi would you merging this PR please?

[sewera]

@dai-shi would you merging this PR please?

You forgot to run Prettier and the build pipeline fails.

execute:
yarn run prettier

[OshriAsulin]

@dai-shi would you merging this PR please?

You forgot to run Prettier and the build pipeline fails.

execute: yarn run prettier

I ran it locally, but it didn't change anything in my code.
So how to do that? Based on that the last commit seems fixed.

[dai-shi]

Are you sure? Unless you have special configs or environments, yarn run prettier should change the file.

[OshriAsulin]

Are you sure? Unless you have special configs or environments, yarn run prettier should change the file.

Now I see when I run yarn run prettier it updates all the files

In the screenshot, you can all the changes, but is this what we expect?

[dai-shi]

No, changing more than one file is unexpected.

[OshriAsulin]

No, changing more than one file is unexpected.

So what do I need to do?

[dai-shi]

I can probably do it for you. But, as I have never heard of it, I'm very curious how your configuration causes it so. Anything you notice? Do you have prettier config somewhere?

[OshriAsulin]

I can probably do it for you. But, as I have never heard of it, I'm very curious how your configuration causes it so. Anything you notice? Do you have prettier config somewhere?

I just have the Prettier extension, I don't know about another config about that

[dai-shi]

Hm? Can you run the command without your IDE?

[OshriAsulin]

Hm? Can you run the command without your IDE?

I tried it without my IDE, it's doesn't matter the response as the same as when I ran this in IDE

[dai-shi]

Can you try removing node_modules and run git ls-files --others?

[OshriAsulin]

@dai-shi would you merging this PR please?

You forgot to run Prettier and the build pipeline fails.

execute: yarn run prettier

I ran it but it didn't happening
And I ran this also yarn run prettier but is showing me this message now-

So do you want I to try more something?

[dai-shi]

So do you want I to try more something?

Yeah, because unless we solve this, you will not be able to contribute to the project next time, and the same thing could happen to other developers.

What's the result of git ls-files --others ?

[OshriAsulin]

Nothing is happening, also in git.

Why you say that? Yeah, because unless we solve this, you will not be able to contribute to the project next time, and the same thing could happen to other developers.

I found more issue to work on him,
Please let me what I need to do. I will do anything what I can do for this

[dai-shi]

Interesting. I have no idea why yarn run prettier fails in your case.

What about cloning a repo separately and run yarn and yarn run prettier without any changes? It shouldn't produce any changes, hopefully?

[sewera]

It seems that you, @OshriAsulin are using Windows. My working theory is that Prettier changed line endings from CRLF to LF, when it changed more than 1 file.

https://docs.github.com/en/get-started/getting-started-with-git/configuring-git-to-handle-line-endings

and

https://www.git-scm.com/book/en/v2/Customizing-Git-Git-Configuration (look for autocrlf)

[OshriAsulin]

I success to run add prettier and change just two files as you wrote
@dai-shi @sewera
please check i now

[dai-shi]

Do we need to add this?

[OshriAsulin]

I thinkning is the incorrect command, but right now I success to running just yarn add prettier without this @veake/prettier-config

This is the changes that you are mentioned all the time I hope so, is what I have now in my code
Just let me to know if this correct, and I push it

[dai-shi]

I'm confused and sorry if things confuse you.
I'd expect this PR to change only one file in docs.

change just two files as you wrote

Did we say to change package.json and yarn.lock files? Sorry for taking your time.

[OshriAsulin]

All good, I'm also confused...
So please you can explain to me from the start again what is all the changes that you expect them?
I ran the command yarn add prettier as you mentioned, and now it has changed just two files instead of a lot of files as it happened in the last time.

[dai-shi]

This PR is to improve docs.
The target file is docs/guides/updating-state.md.
What's expected is to change only that file.
af964ff changes three files compared to main branch.

I don't know what's wrong as usually we don't have such a problem.
If you don't have LF issues, I think reverting the last commit and running yarn and yarn run prettier should change only one file.

[sewera]

@OshriAsulin Check if you are running yarn run prettier, not yarn add prettier.

The add command will install new packages, that is not what you want here.

[OshriAsulin]

@sewera
As you can see yarn run prettier also didn't help because he modified a lot of files, I really don't understand why

[OshriAsulin]

This PR is to improve docs. The target file is docs/guides/updating-state.md. What's expected is to change only that file. af964ff changes three files compared to main branch.

I don't know what's wrong as usually we don't have such a problem. If you don't have LF issues, I think reverting the last commit and running yarn and yarn run prettier should change only one file.

I fixed all the commits to one commit, but I didn't success in running the prettier command

[dai-shi]

didn't help because he modified a lot of files

It looks like CRLF/LF difference issue as pointed out.

[dai-shi]

Merging this for now. Hope you find a solution to the prettier issue.

[OshriAsulin]

Merging this for now. Hope you find a solution to the prettier issue.

I hope I can find a solution to this. Could you explain what exactly the yarn add prettier or yarn run prettier commands need to do in my code? That way I can better describe the issue to my friends who may be able to help me. I hope this makes sense!

[OshriAsulin]

And I have more two questions-
1 Now I can see in the contributors page my name?
2 I found more issues from the documentation, Can I open a PR of them? or first open an issue and after a PR?

[OshriAsulin]

1 If we don't using lastName, you still want to keep it?

Yeah, it would make the example more realistic.

2 Do you want that I change the name of the 'store' from useStore to useNameStore or usePersonStore?

Yes, we avoid using bare useStore in docs. Please check other places. (If we are still using it, we should rename it.)

I found more places this issue is exist can I work on this issue?

[dai-shi]

Feel free to open PRs to improve docs. If you think something should be discussed in advance, you can open a new discussion.
You need to find a solution to the prettier issue. Otherwise, we will be in the same loop.

The first goal is just run prettier without any changes, and it shouldn't change anything.

git clone https://github.com/pmndrs/zustand.git
cd zustand
yarn
yarn run prettier

[dai-shi]

Now I can see in the contributors page my name?

https://github.com/pmndrs/zustand/pulse

https://github.com/pmndrs/zustand/graphs/contributors will show top 100 contributors.