[Solved]-Component not re-render when dispatch action in Redux-Reactjs

Just check reducer, u did not anything with changeStatus !

Try change your ListTaskComponent to below should solve the issue, not need useState just use them directly.

const ListTaskComponent = props => (
        <section id="wrap-task" className="mt-3">
          {props.taskState.tasks.map(value =>
            <TaskItemComponent key={value.id} task={value}/>
           )}
        </section>
    )

The problem is most likely that you're violate the "single source of truth" principal.

You do this with the following lines of code:

const ListTaskComponent = props => {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        setTasks(props.taskState.tasks);
    }, []);

So, what is the plan here? You receive a list of taskState.tasks from the Redux store. Which is is copied into the components own state. What happens if taskState.tasks changes? The ListTaskComponent component will re-render, but since tasks is only set on component mount the value will never update.

The problem is easily fixed by removing the local state.

const ListTaskComponent = props => {
    const tasks = props.taskState.tasks;

The above should fix the "single source of truth" principal. However if the first thing we do is map the state to a value you might as well move this change into mapStateToProps to simplify the actual component.

const ListTaskComponent = ({ tasks }) => {
    const list = tasks.map(value => 
        <TaskItemComponent key={value.id.toString()} task={value} />
    );

    return (
        <section id="wrap-task" className="mt-3">{list}</section>
    )
}

const mapStateToProps = state => ({ tasks: state.taskReducer.tasks });

export default connect(mapStateToProps, null)(ListTaskComponent);

Another issue I can see has to do with the reducer itself. Reducers should not mutate the previous state, yet in your code I can spot mutations to the original state:

let list = state.tasks;
list.push(action.payload);

let list = state.tasks;
let index = list.findIndex((value => value.id === action.payload));
if (index > -1) {
    list[index].status = true;

let list = state.tasks;
let index = list.findIndex((value => value.id === action.payload));
if (index > -1) {
    list.splice(index, 1);

I suggest reading Writing Reducers which explains the rules that reducers should follow and also gives some examples.

Coming back to your code you could write the above code blocks in the following manner:

let list = [...state.tasks];
list.push(action.payload);
// or
let list = [...state.tasks, action.payload];

let list = [...state.tasks];
let index = list.findIndex((value => value.id === action.payload));
if (index > -1) {
    list[index] = { ...list[index], status: true };
// or
let list = state.tasks.map(value => {
   if (value.id !== action.payload) return value;
   return { ...value, status: true };
});

let list = [...state.tasks];
let index = list.findIndex((value => value.id === action.payload));
if (index > -1) {
    list.splice(index, 1);
// or
let list = state.tasks.filter(value => value.id !== action.payload);