React-redux does not repaint the component when changing state?

Link to git - https://github.com/Shading29/tosterr/blob/master/s...
When you change state search does not repaint the table.
State exactly the changes correctly
Apparently I went the wrong way)
April 3rd 20 at 18:35
2 answers
April 3rd 20 at 18:37
Your logic here is this:

Generating input some characters, it calls the function filterUsers, which in turn dispatches input value in the store, replacing each time the parameter search. Whenever dispatch is called PreRender the state, which varies depending on the dispatch. In your example, you update the status of the search parameter when parameter users saves its state since the last time you dispatching it (i.e. call the function loadUsers), because the function filterUsers refers to the case USERTABLE_FILTER_USERS, and the case which directly change the status of users (USERSTABLE_LOAD_USERS) it does not apply.

Try this. The solution is certainly not perfect, but You should see the difference. Replace your case USERTABLE_FILTER_USERS, the one at the bottom.

case USERTABLE_FILTER_USERS:
 return {
...state
 search: action.payload,
 users: filteredUsers(state.users)
 }
April 3rd 20 at 18:39
I looked at your repo:

That's what I did.

First, you set up store and Redux dev-tools.

I did it in your index, but I recommend to make this functionality in a separate file (install missing packages):

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { applyMiddleware, compose createStore } from 'redux';
import { createLogger } from 'redux-logger';
rootReducer import from "./store/reducers";
import { Provider } from "react-redux"
import {BrowserRouter} from "react-router-dom";

function configureStore(initialState) {
 const windowExist = typeof window === 'object';
 const loggerMiddleware = createLogger({
 colors: {
 title: (color) => windowExist && color,
 prevState: (color) => windowExist && color,
 action: (color) => windowExist && color,
 nextState: (color) => windowExist && color,
 error: (color) => windowExist && color
}
});
 const composeEnhancers = (windowExist &&
 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || // eslint-disable-line-no-underscore-dangle
compose;
 return createStore(
rootReducer,
initialState,
composeEnhancers(
applyMiddleware(loggerMiddleware),
)
);
}



const application = (
<BrowserRouter>
 <Provider store={configureStore()}>
<App/>
</Provider>
</BrowserRouter>
)

ReactDOM.render( application , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();


Functionality filteredUsers in the folder reducers are not needed. You already have an array with users, can work with it directly in the component.

// src/store/UsersTable/reducers.js

import {
USERSTABLE_LOAD_USERS,
USERTABLE_FILTER_USERS
} from "./actions";

const defaultState = {
 users: [],
 isLoading: true,
 search: ",
}



export const userstableReducer = (state = defaultState, action) => {
 switch(action.type) {
 case USERSTABLE_LOAD_USERS:
 return {
...state
 users: action.payload,
 isLoading: false
}
 case USERTABLE_FILTER_USERS:
 return {
...state
 search: action.payload
}
 default: return state
}

}


Now to the question.

You already have the array, having worked directly with which to reflect the desired cells
import React from "react"
import "./userstable.css"

export default class UsersTable extends React.Component {
 render() {
 const { users, filterUsers, searchValue } = this.props
 const filteredUsers = users && users.filter(user => {
 const fullName = `${user.name} ${user.surname}`;
 return fullName.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
});
 return (
<React.Fragment>
<input
 onChange={event => filterUsers(event.target.value)}
/>
<table>
<thead>
the <tr>
<th>Name</th>
<th>last Name</th>
<th>City</th>
<th>IP</th>
</tr>
</thead>
 {<b>filteredUsers</b>.map(user => {
 return (
 <tbody key={user.id}>
the <tr>
 <td> {user.name}</td>
 <td> {user.surname}</td>
 <td> {user.city}</td>
 <td> {user.lastloginfromip}</td>
</tr>
</tbody>

)
})}
</table>
</React.Fragment>
)
}
}

5dfa91f33fd2a343028976.png
Redux created in order to bring logic into a separate place, and work with an array directly in the component was not correctly using redex in the project? - derrick commented on April 3rd 20 at 18:42
You do not need to define a new state of the application on each click of the user. You have an array, render on the page what you need, it's simple.

My solution is universal, Google dynamic search with reactive or react dynamic search and most of the links will give the same solution. - Pink_Jer commented on April 3rd 20 at 18:45

Find more questions by tags ReactRedux