jaysoo / todomvc-redux-react-typescript Goto Github PK

Thank you for the tutorial and example code - I've been trying for a while to get the redux-devtools-extension working with this sample, but unsuccessfully.

I think it might be to do with the version of redux being included, but I think I'm having trouble getting the correct version of the typings to be referenced.

Issue - redux-devtools-extension is reporting:

No store found. Make sure to follow the instructions.

When trying to follow those instructions, typescript is complaining about my call to createStore and returning the following error:

Supplied parameters do not match any signature of call target.

I've tried updating versions in npm, but may be missing something necessary to get typings updated too? I think if I can get the addition to createStore it should be happy, but I can't work out the magical typings incantation.

Environment: Mac OSX, Atom with atom-typescript and atom-jsx-transform

I'm not sure if this is an issue, or just my inexperience with webpack and how it's configured for project.

How do you import a css into the project. There is normally two ways:

1. Using import styles from
2. Using require ()

However, in both cases it doesn't work. In the webpack it seems that it does add the styles!css loader.

Any advice appreciated,
Thanks,
Derek

The following modules couldn't be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details

to recreate:

• run npm start
• open localhost:3000 in browser and have dev tools open
• edit file client/todos/components/Header.tsx (e.g. change placeholder on line 23 to be "new placeholder text")
• save file
• switch to browser
• observe changes not applied. observe warning in console

Latest typings uses the term "global" instead of "ambient".

Simply changing typings.json from ambient to global doesnt seem to fix it tho.

I'm trying to figure out Redux and what are best practices using it. From it's documentation one gets an impression bindActionCreators is not a good practice:

Normally you should just call dispatch directly on your Store instance. If you use Redux with React, react-redux will provide you with the dispatch function so you can call it directly, too.

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn’t aware of Redux, and you don’t want to pass dispatch or the Redux store to it.

Emphasis mine, see documentation for more information.

However, at the moment I don't know what is the preferred alternative to bindActionCreators.

Was wondering if you would interested in a PR to migrate to typings, since tsd is deprecated?

Also, looks like that Redux with reduxjs/redux#1413 is getting an official Typescript definition file. Interested to giving some input?

Hi Jack,

Thanks for sharing your learning via blog post and this repository!

(On Windows 10 with Node v4.4.2 and NPM v3.10.6)
After cloning and running npm i (alias for install) got following warnings:

npm WARN deprecated [email protected]: Versions before 3.1.3 are known to crash on IE in some cases. Please update to 3.1.3 or newer.
npm WARN deprecated [email protected]: Babel's CLI commands have been moved from the babel package to the babel-cli package
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead!
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

Do you mind if I send you a Pull Request fixing some or all of those?

Best,
Igor

The example seems to run fine, but after starting the server I'm seeing several errors in the terminal window. Again, they don't seem to be affecting the functionality. I'm learning several of the frameworks involved here simultaneously so I'm not certain how to proceed on my own in tracking this down, so I'd greatly appreciate any assistance here (or maybe even just a pointer in the right direction!). There are many errors listed, here's first few:

[0] Version: webpack 1.12.10
[0] Child
[0] Hash: 6a700656bf85261ba595
[0] Version: webpack 1.12.10
[0] Time: 45041ms
[0] + 209 hidden modules
[0]
[0] ERROR in ./client/todos/components/TodoTextInput.tsx
0: error TS2307: Cannot find module 'react'.
[0]
[0] ERROR in ./client/todos/components/TodoTextInput.tsx
0: error TS2307: Cannot find module 'classnames'.
[0]
[0] ERROR in ./client/todos/components/TodoTextInput.tsx
0: error TS2339: Property 'state' does not exist on type 'TodoTextInput'.

Further down, I'm seeing a separate group:

Cannot find module 'chai'.
[0]
[0] ERROR in /Users/cbray/Node/todo-react/client/todos/spec/reducer-spec.ts
0: error TS2304: Cannot find name 'describe'.
[0]
[0] ERROR in /Users/cbray/Node/todo-react/client/todos/spec/reducer-spec.ts
0: error TS2304: Cannot find name 'it'.
[0]
[0] ERROR in /Users/cbray/Node/todo-react/client/todos/spec/reducer-spec.ts
0: error TS2304: Cannot find name 'it'.

Grateful for any assistance!

Running the development does not work on windows
The error is Error: Cannot find module '../build/stats-dev.json' (does not exist)
and (http://localhost:8000/) does not work.

production does work

How do you let two modules communicates under the same parent module?

steps to reproduce:

setup:
have chrome installed with redux dev tools on mac

issue:

• cloned this repo (todomvc-redux-react-typescript)
• ran npm start
• visited http://localhost:3000/
• opened chrome dev tools & clicked into the dev tools redux tab

expected:
redux store to show

actual:
no redux store shown

Thanks for the tutorial and example.

I was wondering if you new how to see the uncompiled tsx files in chrome dev tools?

For instance, i put a console log in Header.tsx. The console will log something out, I click "Header.tsx" on the right and it'll open up Header.tsx in the sources tab. It's been compiled to javascript when it would be nicer to view the tsx unchanged.

Is there any way to change the sourcemaps so this can work?

I am following the instructions in the README.md, and run the following command:

npm run dev-server

There is no error message on the console.

Tried the URL (http://localhost:2992/) with no luck.

All the constants in ActionTypes.ts is unused and repeated in actions.ts.

I think they should be deleted from the second file and imports should be reoptimized. 😄

From #11

I also noticed that the project is creating errors around:
mouseWatcher-bundle.js:1 Uncaught ReferenceError: webpackJsonp is not defined

Tried pulling this down and npm install under node 10.9 and it fails with errors related to fsevents.