Needed: A Clear Explanation about the Usage of Redux in a Goji.js Project

[Ziyu-Chen]

Is it possible for anyone to elaborate on the usage of Redux in goji.js?

I tried wrapping the Page component with Provider (imported from "react-redux") like you would normally do in a React project, but my app can't load it for some reasons.

The error message in the console reads: "Page[pages/index/index] not found. May be caused by: 1 Forgot to add page route in app.json. 2. Invoking Page() in async task." I suppose it's probably caused by the second one, but I don't know how to fix it.

[hyf0]

@Ziyu-Chen Please show your folder structure and your code, and app.json.

This seems to be because you didn't configure app.json correctly

请展示下你的文件夹结构和你的代码，以及 app.json。

这看起来是是因为你没有正确的配置 app.json

[Ziyu-Chen]

But it was working just fine before I added Redux to my Goji.js project.

Here is my index.ts file. I had to put my Page component in a separate file because otherwise the JavaScript file that contains the Page component would get too large after compilation and the mini-program just couldn't be loaded.

And here is my app.json file.

Can you guys elaborate more on how to use Redux in a Goji.js project in your documentations? Right now you only mentioned Redux can be used in a Goji.js project. More informative instructions with concrete examples would be appreciated. Thank you in advance!

[Ziyu-Chen]

I tested a few more times, and I found out that whenever I remove the Provider, my app can be loaded without any issues. I suppose I shouldn't wrap the Page component with the react-redux Provider. But then where should I add the Provider to make the Redux state available throughout the app?

[hyf0]

@Ziyu-Chen Judging from the code you showed, this usage should be correct. Here is an official sample project, you can take a look.

从你展示的代码来看，这种用法应该是正确的。这里有一个官方示例项目，你可以看看。

[Ziyu-Chen]

I was using configureStore() from Redux Toolkit to create my store, and as soon as I changed it back to the good old createStore() my mini-program was correctly loaded. Thank you for your suggestions anyways!

Is Redux Toolkit not yet fully compatible with Goji.js? (I'm also using createSlice() from Redux Toolkit and it works pretty well with my Goji.js project.)

[Ziyu-Chen]

Also I'm willing to contribute to the documentations of Goji.js. It is a great framework and I believe with more detailed documentation people will find it easier to pick up the framework and the community will grow faster.

[malash]

Hello @Ziyu-Chen , thank you for your bug reporting.

I learn and try @reduxjs/toolkit in the TodoMVC demo. It's an awesome library. But it does not work in GojiJS. I find this error in console.

I cannot 100% confirm that you saw the same issue as me. It would be appreciated if you could provide more details about you issue.

Later, I found the root cause and fixed it in #40 . And the @reduxjs/toolkit works.

You can re-try you project after upgrade latest GojiJS 0.8.6

[malash]

Also thanks @Ziyu-Chen and @iheyunfei for your contribution to GojiJS.

I agree it is a good idea to add document about how to use redux / redux toolkit in GojiJS on the official website https://goji.js.org/ as a new section of Advanced usages.

[Ziyu-Chen]

Hello @Ziyu-Chen , thank you for your bug reporting.

I learn and try @reduxjs/toolkit in the TodoMVC demo. It's an awesome library. But it does not work in GojiJS. I find this error in console.

I cannot 100% confirm that you saw the same issue as me. It would be appreciated if you could provide more details about you issue.

Later, I found the root cause and fixed it in #40 . And the @reduxjs/toolkit works.

You can re-try you project after upgrade latest GojiJS 0.8.6

Hi @malash! Thank you for your reply! I actually didn't come across this issue. The combineReducers function actually works just fine for me. It is the configureStore function that I couldn't use in my project. I had to change it to createStore.

[Ziyu-Chen]

@malash I also have another question: is it possible to share the same store among different pages? If so, do I just wrap each page component with a react-redux Provider and pass the same store to each Provider? If not, is there any work-around for it?

[malash]

@Ziyu-Chen Yes, you can.

// store/index.ts
export default configStore();

// subPackageA/pages/index.tsx
import store from '../../store';

render(<Provider store={store}><AppA /></Provider>);

// subPackageB/pages/index.tsx
import store from '../../store';

render(<Provider store={store}><AppB /></Provider>);