buckyroberts / react-redux-boilerplate Goto Github PK

when I run npm install it shows the below warning
npm WARN [email protected] No repository field

and when I run webpack it shows webpack: command not found

Hey @buckyroberts, I am following your redux tutorial in youtube and it's awesome. You made redux concept so easy.
But now, i am facing one issue in redux. If you can help me out from this, i will be very thankful.

I am trying to use socket.io in my react-native project. I created one SocketHelper.js file and i put all my events over there. Please check my code below.

import React from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
window.navigator.userAgent = 'react-native';
import io from 'socket.io-client/dist/socket.io'
import { setRouteAction } from '../../ReduxModel/Actions/BusRouteAction'

var socket;

export function socketListener () {

    socket = io('localhost://3000', {jsonp: false});

    socket.on('connectionCheck', (response)=> {
        console.log('socket connection' + response.message);
    });

    socket.on('getRoutesResponse', (response) => {
        console.log('route json response : ' + response);
        console.log(props)
    });
}

function mapStateToProps(state) {
    return {
        user: state.user
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
        routes: setRouteAction
    }, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps);

and the issue is as i am not using a class here, how i can use routes (i.e. inside the matchDispatchToProps) as props to dispatch my data.

Please let me know, if i am missing any concept or anything i am doing wrong.

PS C:\Users\p-c\Downloads\Github\React-Redux-Boilerplate> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/redux
npm ERR! redux@"^3.5.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer redux@"^4" from [email protected]
npm ERR! node_modules/redux-thunk
npm ERR! redux-thunk@"^2.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\p-c\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\p-c\AppData\Local\npm-cache_logs\2022-05-25T09_26_40_767Z-debug-0.log

In index.js, in the line

import App from './components/app';

change it to

import App from './components/App';

Hey Bucky,

Is there some sort of build task which will create a bundle for your app somewhere? I believe its missing. I can't build static files for my server.

Thanks,
Adrian

I am failing to start the server here ...

I npm install everything,
I webpack
Then i do npm run start and I get this error ...

pm ERR! code ELIFECYCLE
npm ERR! [email protected] start: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server'.

Hey Bucky,
You are awesome! man, ok let's get serious now :-) . I have the following structure

UserPage -> Container
|-----UserList -> Dumb Component
|--- User ->Dumb Component

My action and dispatch obviously is connected to container which is UserPage

function mapStateToProps(state) {
    return {
        users: state.users
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({deleteUser: deleteUser}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(UserPage);

Now I am passing deleteUser action to the UserList Component as

and then from UserList to the User as

userList() {
        return this.props.users.map(function(user, i){
            return(
                <User key={i} user={user} deleteUser={this.props.deleteUser} />
            );
        });
    }

and finally my leaf component User has this code

class User extends React.Component {

    render() {
        console.info(this.props.deleteUser);
        var user = this.props.user
        return(
            <tr>
                <td>{user.id}</td>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.createdAt}</td>
                <td>{user.updatedAt}</td>
                <td>
                    <a href="#" onClick={()=>this.props.deleteUser(user)}> Delete</a>
                </td>
            </tr>
        );
    }
}

export default User;

Now when I pass delete user from UserList to User I get this error

app.bundle.js:29210 Uncaught TypeError: Cannot read property 'props' of undefined

I am not sure what am I doing wrong here mate? Would you know what's going ?

BTW I tried treating deleteUser as function by passing it as ()=>delete user, but I still get that error

How can use mongodb in react? i can able to fetch directly in component data but i am not able to get record with combineReducers. please provide solution. I used following code for combineReducers :-

detailReducer = () => {
    Meteor.subscribe('detail');
    var detail = Detail.findOne();
    console.log("-----> ",detail.data)
    return detail.data;
}

export default createContainer(() => {
    Meteor.subscribe('detail');
    var detail = Detail.findOne();
    console.log("-----> ",detail.data)
    return {
        detail: detail.data
    };
}, detailReducer);

class UserDetail extends Component { render() { if (!this.props.user) { return (<div>Select a user...</div>); } return ( <div> <img src={this.props.user.thumbnail} /> <h2>{this.props.user.first} {this.props.user.last}</h2> <h3>Age: {this.props.user.age}</h3> <h3>Description: {this.props.user.description}</h3> </div> ); } }

In the above example by you, the user props is checked inside render.
What if I want to check it outside render to perform something else (like axios request).
I checked the following code outside render,
if (!this.props.user) { return (<div>Select a user...</div>); }

But this always returns <div>Select a user...</div>.
Any suggestions on this?
Thanks in advance

I just started following your video tutorial but when I type in $ webpack I get the following error:
ERROR in ./~/css-loader!./~/sass-loader!./dev/scss/style.scss Module build failed: ReferenceError: Promise is not defined at LazyResult.async (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:237:31) at LazyResult.then (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:141:21) at processCss (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/lib/processCss.js:198:5) at Object.module.exports (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/lib/loader.js:24:2) @ ./dev/scss/style.scss 4:14-122

What should I do now?

I got a doubt about your explanation on README.md inside components folder. You say that "components are aware of application state". However, I understand that containers are aware of state. Perhaps you wanted to say "components are NOT aware of application state". And this is just a bacon, tuna, typo, whatever 😋 .

Anyways, I came around here after watching some talks from Rob Pike on youtube and I really enjoy how you flow smoothly across a lot of explanations (just to make a 🍅). You're awesome Sir!. Have you ever wanted to try Golang btw? I sincerely think that you might shine over there. Saludos!

Hi Bucky ...
I'm on very initial stage of react and redux, I have few queries about your boilerplate which is given below.
In your boilerplate, from where I should call api and how to call api ... ? Another thing is why 'stores' layer isn't exist in your boilerplate structure ... ?
If you let me know it will help me.
Thank you.

Hi Bucky!, great job with the tutorials, they are great. I got this nasty error while installing all dependecies or in addition installing webpack.

npm WARN optional Skipping failed optional dependency /webpack/chokidar/fsevents
:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]

I'm using windows.

$ npm i

[email protected] install D:\Prosjekter\Privat\sandbox-react\redux-boilerplate\node_modules\node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node":

HTTP error 404 Not Found

...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1

Hi Bucky,

First of all thanks a lot for your great ressources,

It's not really an issue but I don't understand why you are using this syntax for the App components.. why are we not using the basic function like render ?

After clonin, and running npm install, webpack, and npm run start, the code will run on localhost:3000. However when changes are made to the code, they are not reflected in the browser automatically or even upon refresh. No errors are being shown in the browser developer console.

Hi,
I have a quick question, how is it possible to update your userdata List dynamically? (React-Redux-Boilerplate/dev/js/reducers/reducer-users.js)
I want to update this data every x seconds and render the webpage without a complete reload.
I spent a lot of time to figure out how this is working but without any success. I hope you can help me.

Thank you!

Spread operator shows error when compiling. Can you tell me what do I need to do for using Spread operator?