How we change boolean state in redux - reactjs

Question

I have a state named isFocused and it is false. When I focus on my input, I want it to turn true. I tried so many things but couldn't handle it. These are what I did.
Initial State
export default {
isFocused: false
}
Action Type
export const SEARCH_ACTION = "SEARCH_ACTION"
Action
export function searchAction() {
return { type: actionTypes.SEARCH_ACTION, payload: null }
}
Reducer
export default function navbarReducer(state = initialState, action) {
switch (action.type) {
case actionTypes.SEARCH_ACTION:
return {
...state,
isFocused: !state.isFocused
}
default:
return state
}
}
UI
focusHandler() {
console.log(this.props.isFocused)
}
<input
placeholder="Search in Facebook"
onFocus={() => this.focusHandler()}
/>
function mapStateToProps(state) {
return {
isFocused: state.NavbarReducer
}
}
export default connect(mapStateToProps)(NavSec1)
It shows always false in console. How can i solve this ? I am new in redux.

Answer 1

mapStateToProps is to read the value from the store and make it accessible in your component.
To change the state in your store you need to dispatch an action, the connect in react-redux takes a second argument called as mapDispatchToProps .
import searchAction from 'your action file path';
focusHandler() {
// dispatch the action
this.props.searchAction();
}
<input
placeholder="Search in Facebook"
onFocus={() => this.focusHandler()}
/>
function mapStateToProps(state) {
return {
isFocused: state.NavbarReducer
}
}
export default connect(mapStateToProps, {searchAction})(NavSec1)
Now onInputFocus you will dispatch an action to the store which toggle's the isFocused state in your store. To check this, You can do
console.log(this.props.isFocused)
inside your render method above your return you should be seeing the state getting changed onFocus.